Как вставить фоновое изображение в html: Как добавить фоновый рисунок на веб-страницу?

Как добавить фон SVG в HTML

Автор Matt Visiwig, 20 октября 2021 г.

Есть два способа добавить фон SVG в HTML: CSS и встроенный SVG. Оба требуют базовых знаний HTML и CSS.

Добавление фонового изображения с помощью CSS намного проще, поскольку изображение обрабатывается как фон, и поэтому вы можете размещать текст и другое содержимое поверх изображения. Если вместо этого вы используете встроенные SVG для своего фона, вам потребуется абсолютное или фиксированное позиционирование, чтобы добавить контент над этим фоновым слоем.

В этой статье мы рассмотрим последний и более сложный метод. Если вы хотите изучить метод CSS, я уже рассказывал, как добавлять фоны SVG с помощью CSS в своем блоге.

Зачем добавлять встроенный SVG в качестве фонового изображения в HTML

Основное преимущество встроенного фона SVG заключается в том, что вы можете динамически изменять и анимировать свойства фона. Ваша возможность изменять свойства ограничена методом CSS: background-image .

Другая причина может заключаться в том, что вы планируете использовать повторяющиеся элементы для уменьшения размера файла. Если вы создаете сложную форму, вы можете присвоить ей идентификатор, а затем сослаться на нее с помощью 9.0013 элемент, чтобы разместить сложную форму в другом месте с меньшей площадью.

Если вы не планируете манипулировать встроенным SVG в качестве фона или повторно использовать фоновые элементы, это будет причиной НЕ встраивать SVG в качестве фона, а вместо этого использовать метод CSS: background-image .

H Как добавить встроенный SVG в качестве фонового изображения в HTML

Первое, что нам нужно, это код SVG. Если у вас есть файл SVG, вы можете открыть его в редакторе кода или простом текстовом редакторе, чтобы получить код SVG в буфер обмена. В этом примере я иду на SVGBackgrounds.com, чтобы получить этот бесплатный фон под названием «Жидкий сыр», нажать кнопку экспорта, затем выбрать параметр «Встроенный SVG», чтобы скопировать код SVG в мой буфер обмена. Я вставлю его в свой редактор и вырежу половину контуров (форм), чтобы упростить демонстрацию. Вот код, с которого я начинаю.

 

   
   
    5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.4C 107.4C 178,1 1214,2 196,1 1397,5 154,8з'/>

Сначала давайте добавим его на страницу, чтобы вы могли разместить текст поверх него.

Мы поместим как текстовый, так и фоновый слои в родительский слой с позицией : относительная , что позволит текстовому слою иметь позицию : абсолютная для отображения над фоном. Хотя фон не имеет специальных свойств CSS, он определяет размеры контейнера, но родительская оболочка контролирует текущую ширину.

 <стиль>
   .wrap-слой{
      положение: родственник;
   }
   .текстовый слой{
      положение: абсолютное;
      ширина: 100%;
      высота: авто;
      сверху: 0;
      слева: 0;
      /* некритичные стили опущены */
   }

<дел>
   <дел>
      НАВЕДИТЕ НАД ФОНОМ