Фоновое изображение - CSS-хитрости

Anonim

background-imageСвойство в CSS применяется графический (например , PNG, SVG, JPG.webp, GIF, WebP) или градиент на фоне элемента.

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

Изображений

Использовать изображение на фоне довольно просто:

body ( background: url(sweettexture.jpg.webp); )

url()Значение позволяет обеспечить путь к файлу к любому изображению, и оно будет отображаться в качестве фона для этого элемента.

Вы также можете установить URI данных для url(). Это выглядит так:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Этот метод удаляет один HTTP-запрос, что хорошо. Но есть ряд недостатков, поэтому, прежде чем начинать заменять все свои изображения, убедитесь, что вы учли все плюсы и минусы URI данных.

Вы также можете использовать background-imageспрайт изображений, что является еще одним полезным методом уменьшения количества HTTP-запросов.

Градиенты

Другой вариант использования фона - указать браузеру создать градиент. Вот супер-пупер простой пример линейного градиента:

body ( background: linear-gradient(black, white); )

Вы также можете использовать радиальные градиенты:

body ( background: radial-gradient(circle, black, white); )

Технически говоря, градиенты - это просто еще одна форма фонового изображения. Разница в том, что браузер создает изображение за вас. Вот как их писать: CSS3 Gradient Syntax

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

Установка резервного цвета

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

body ( background: url(sweettexture.jpg.webp) blue; )

Несколько фоновых изображений

Для фона можно использовать несколько изображений или смесь изображений и градиентов. Сейчас хорошо поддерживается несколько фоновых изображений (все современные браузеры и IE9 + для графических изображений, IE10 + для градиентов).

Когда вы используете несколько фоновых изображений, имейте в виду, что существует несколько нелогичный порядок наложения. Перечислите изображение, которое должно быть впереди первым, и изображение, которое должно быть последним, например:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Когда вы используете несколько фоновых изображений, вам часто нужно установить больше значений для фона, чтобы все было в нужном месте. Если вы хотите использовать backgroundсокращение, вы можете установить значения для каждого изображения отдельно. Ваша стенография будет выглядеть примерно так (обратите внимание на запятую, отделяющую первое изображение и его значения от второго изображения и его значений):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Нет ограничений на количество фоновых изображений, которые вы можете установить, и вы можете делать интересные вещи, например, анимировать фоновые изображения. В блоге Дэвида Уолша есть хороший пример нескольких фоновых изображений с анимацией.

Демо

См. Фоновое изображение Pen от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • фоновое приложение
  • фоновый клип
  • фоновый цвет
  • фон-происхождение
  • фоновая позиция
  • фон-повтор
  • размер фона

Дополнительные ресурсы

  • Спецификация CSS3
  • MDN
  • Идеальные фоновые изображения для всей страницы
  • Освоение градиентов CSS (слайд-шоу)

Поддержка браузера

Обычные изображения работают везде, а несколько изображений работают в современных браузерах и IE9 +. Вот поддержка градиентов:

Хром Сафари Fire Fox Опера IE Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+