background — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Подсказки

Кратко

Скопировано

Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:

  • background-attachment;
  • background-clip;
  • background-color;
  • background-image;
  • background-position;
  • background-repeat;
  • background-size.

Пример

Скопировано

Код ниже задаёт чёрную заливку фона, фоновую картинку bkg.png, которая не будет повторяться, будет расположена по центру по вертикали и горизонтали, а также закроет всю площадь родителя.

div {  background: #000000 url("bkg.png") no-repeat center / cover;}
          div {
  background: #000000 url("bkg. png") no-repeat center / cover;
}

Как пишется

Скопировано

Можно указать одно или несколько значений для разных свойств, разделяя их пробелами. Значения можно писать в любом порядке, браузер сам определит, какое значение к какому свойству относится.

⚠️

В произвольном порядке записи свойств есть исключение: в паре position / size порядок записи только такой, через слэш. А ещё, если опустить size, то position сработает, но если опустить position, то size не сработает.

div {  /* Сработает */  background: url("bkg.png") center / cover;  /* Сработает */  background: url("bkg.png") center;  /* Не сработает */  background: url("bkg.png") cover;}
          
 
div {
  /* Сработает */
  background: url("bkg.png") center / cover;
  /* Сработает */
  background: url("bkg.png") center;
  /* Не сработает */
  background: url("bkg.png") cover;
}

Лучше не полагаться слишком на это поведение и использовать полные записи: background-position и background-size.

Ни одно из значений не является обязательным, поэтому ненужные можно смело опустить.

Подсказки

Скопировано

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

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством background.

Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

will-change

ctrl + alt + ←

Следующий материал

→

background-color

ctrl + alt + →

Галерея шаблонов CSS3

Галерея шаблонов CSS3
  • Щелкните шаблон, чтобы развернуть его
  • Текстовые поля доступны для редактирования
  • Поддержка браузера
  • Отправить новый
  • Репозиторий Github
  • Наслаждайтесь!
  • mcbroom.me»/>
  • com/#post-22″/>
  • jadu.net»/>

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

Сами шаблоны должны работать на Firefox 3.6+ , Chrome , Safari 5.1 , Opera 11.10+ и IE10+

. Однако ограничения реализации могут привести к тому, что некоторые из них не будут отображаться правильно даже в этих браузерах (например, на момент написания Gecko довольно глючил с радиальными градиентами).

Кроме того, эта галерея не будет работать в Firefox 3. 6 и IE10, хотя они и поддерживают градиенты, из-за ограничений JavaScript.

Руководство по отправке

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

  • Представляет ли он новую технику?
  • Стоит ли эффект от количества градиентов и цветовых остановок? Весь смысл этих шаблонов в том, чтобы ускорить загрузку страниц за счет уменьшения размера файла и HTTP-запросов без нечитаемой тарабарщины, которую URI данных добавляют в наши таблицы стилей. Например, если вашему шаблону требуется код размером 2 КБ (который становится 10 КБ при использовании в рабочей среде из-за всех префиксов), то это не очень полезно, за исключением того, что служит доказательством концепции.
  • Насколько распространен шаблон?
  • Красиво выглядит?

CSS — Фоны и рамки

CSS — Фоны и рамки

Вернуться к оглавлению.

Модуль фонов и границ CSS3.

Фоны и границы.

Это рабочий стол. См. также мобильный стол.

Последнее крупное обновление от 1 июля 2016 г.

[ Хотите улучшить свой CSS? Вы можете нанять меня в качестве Тренер по CSS. ]

Фоны

фон- приложение

Указывает, прокручивается ли фоновое изображение вместе с документом, элементом или вообще не прокручивается.		 Инком в комплекте Да Да Да Инком в сборе Да Да Багги
Неполный
браузер не поддерживает локальный .
Неправильно
прокрутка означает локальный .
  • локальный не работает в Chrome/Windows 10, но работает в Windows 7. Как и в Android, Windows 10 необходимо добавить к элементу border-radius (и нет, 0 недостаточно .)
  • На UC фиксированный работает как обычно, за исключением того, что при прокрутке элемента фон тоже прокручивается.

фоновый клип

Указывает, закрывает ли фон рамку (по умолчанию), padding-box или поле содержимого.		 № Да Да Да Да Да Да

-webkit-background-clip: текст

Фон просвечивает через текст, если он прозрачен, и только через текст.		 № Да № Да Да Да Да

цвет фона

 Да Да Да Да Да Да

фоновое изображение

 Инком в комплекте Да Да Да Да Да Да
  • IE8 и более ранние версии не поддерживают несколько фоновых изображений.

фон-происхождение

Указывает, происходит ли фон в рамке, отступе (по умолчанию) или поле содержимого.		 № Да Да Да Да Да Да

фоновая позиция

Указывает, как расположено фоновое изображение.		 Ал большинство Да Да Да Да Да Да
  • IE8 не поддерживает синтаксис справа 20 пикселей снизу 10 пикселей .

фоновая позиция-x и -y

Указывает, как фоновое изображение расположено в направлении x или y.		 Да № Да Да Да Да

повтор фона

Указывает, как фон повторяется.		 Да Инком в комплекте Да Да Да Да

Firefox не поддерживает пробел и округление .

размер фона

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

Прочее

радиус границы

 № Да Да Да Да Да Да

коробка-декор-брейк

 № Да -вебкит- -вебкит- -вебкит- -вебкит-

Только Firefox поддерживает его для элементов в столбцах.

коробка-тень

 № Да Да Да Да Да Да

Протестированные браузеры

Тестовый массив настольного браузера 3.0; июль 2016

IE 8, 9 и 10
В отдельных виртуализациях Windows 7, загруженных из Modern IE.
ИЭ11
Виртуализация Windows 8.1, загруженная из Modern IE.
Край 13
На Surface Book с Windows 10.
Фаерфокс 47
47.0.1 на Win10 и Mac
Сафари 9.1.1
9.1.1 на Mac
Хром 51
51 на Win10 и Mac
Опера 38
38 на Win10 и Mac
УК 5,6
5.6 в Windows 7
Операционные системы
Mac
Mac Mini с ОС 10.11.15
Это моя главная испытательная станция.

No related posts.