Фон - CSS-хитрости | CSS Альманах 2024

backgroundСвойство в CSS позволяет контролировать фон любого элемента (то , что краски под содержание этого элемента). Это сокращенное свойство, означающее, что оно позволяет записать несколько свойств CSS в одном. Так:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background состоит из восьми других свойств:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

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

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Фон будет прозрачным, а не красным. Исправить это просто: просто определите background-colorпосле backgroundили просто используйте сокращение (например background: url(… ) red;)

Несколько фонов

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

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

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

Рецепты

См. Pen emBzRd Тимоти Миллера (@tjacobdesign) на CodePen.

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

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