CSS
Фон

Вступление

Синтаксис

• background-color: color | прозрачный | начальная | наследовать;
• background-image: url | нет | начальная | наследовать;
• background-position: значение;
• background-size: <bg-size> [<bg-size>]
• <bg-size>: авто | длина | обложка | содержат | начальная | наследовать;
• background-repeat: repeat | repeat-x | repeat-y | no-repeat | начальная | наследовать;
• background-origin: padding-box | пограничный ящик | контент-бокс | начальная | наследовать;
• background-clip: border-box | прокладка | контент-бокс | начальная | наследовать;
• фон-приложение: прокрутка | исправлено | местные | начальная | наследовать;
• background: bg-color bg-image position / bg-size bg-repeat bg-origin bg-clip bg-attachment initial | наследовать;

замечания

Фоновый цвет

Свойство background-color задает цвет фона элемента с использованием значения цвета или с помощью ключевых слов, например, transparent , inherit или initial .

• прозрачный , указывает, что цвет фона должен быть прозрачным. Это значение по умолчанию.

• inherit , наследует это свойство от своего родительского элемента.

• initial , присваивает этому свойству значение по умолчанию.

Это может быть применено ко всем элементам и ::first-letter псевдо-элементам ::first-letter / ::first-line .

Цвета в CSS можно указать разными способами .

Названия цветов

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• Приведенный выше пример является одним из нескольких способов, которыми CSS должен представлять один цвет.

Кодовые обозначения

Hex-код используется для обозначения компонентов RGB цвета в шестнадцатеричной нотации base-16. # ff0000, например, ярко-красный, где красный компонент цвета составляет 256 бит (ff), а соответствующие зеленые и синие части цвета - 0 (00).

Если оба значения в каждом из трех пар RGB (R, G и B) совпадают, тогда код цвета можно укоротить на три символа (первая цифра каждого спаривания). #ff0000 можно сократить до #f00 , а #ffffff можно сократить до #fff .

Hex-нотация нечувствительна к регистру.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Другой способ объявить цвет - использовать RGB или RGBa.

RGB означает красный, зеленый и синий и требует трех отдельных значений от 0 до 255, расположенных между скобками, которые соответствуют десятичным значениям цвета соответственно красного, зеленого и синего.

RGBa позволяет добавить дополнительный альфа-параметр между 0.0 и 1.0 для определения непрозрачности.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Другой способ объявить цвет - использовать HSL или HSLa и похож на RGB и RGBa.

HSL обозначает оттенок, насыщенность и легкость, а также часто называется HLS:

• Оттенок - это градус на цветовом колесе (от 0 до 360).
• Насыщенность - это процент от 0% до 100%.
• Легкость также составляет от 0% до 100%.

HSLa позволяет добавить дополнительный альфа-параметр между 0.0 и 1.0 для определения непрозрачности.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Взаимодействие с фоновым изображением

Следующие утверждения эквивалентны:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Все они приведут к отображению красного цвета под изображением, где части изображения прозрачны или изображение не отображается (возможно, в результате background-repeat ).

Обратите внимание, что следующее не эквивалентно:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Здесь значение background переопределяет background-image .

Для получения дополнительной информации о background собственности см фона стенографии

Изображение на заднем плане

Свойство background-image используется для указания фонового изображения для всех сопоставленных элементов. По умолчанию это изображение выложено для покрытия всего элемента, за исключением поля.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Чтобы использовать несколько изображений в качестве background-image , определите разделяемый запятыми url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Изображения будут складываться в соответствии с их порядком с первым объявленным изображением поверх других и так далее.

Больше CSS для фонового изображения

Эти следующие атрибуты очень полезны и почти существенны.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Фоновые градиенты

Градиенты - это новые типы изображений, добавленные в CSS3. В качестве изображения градиенты задаются с использованием свойства background-image или сокращением background .

Существует два типа функций градиента: линейный и радиальный. Каждый тип имеет не повторяющийся вариант и повторяющийся вариант:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

линейный градиент ()

linear-gradient имеет следующий синтаксис

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Например, это создает линейный градиент, начинающийся справа и переход от красного к синему

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Вы можете создать diagonal градиент, объявив горизонтальную и вертикальную начальную позицию.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

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

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

радиально-градиент ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Повторяющиеся градиенты

Повторяющиеся функции градиента принимают те же аргументы, что и приведенные выше примеры, но нарисуйте градиент на фоне элемента.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Обратите внимание, что вместо названий цветов могут использоваться цветовые коды HEX, RGB, RGBa, HSL и HSLa. Названия цветов использовались для иллюстрации. Также обратите внимание, что синтаксис радиального градиента намного сложнее линейного градиента, и здесь показана упрощенная версия. Полное описание и спецификации см. В Документах MDN

Сокращение фона

Свойство background можно использовать для установки одного или нескольких связанных с фоном свойств:

Порядок значений не имеет значения, и каждое значение является необязательным

Синтаксис

Синтаксис фоновой сокращенной декларации:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Примеры

background: red;

Просто установите background-color с red значением.

background: border-box red;

Установка background-clip в рамку-рамки и background-color в красный.

background: no-repeat center url("somepng.jpg");

Устанавливает background-repeat не повторяющийся, background-origin в центр и background-image изображение.

background: url('pattern.png') green;

В этом примере background-color элемента будет установлен на green с помощью pattern.png , если он доступен, наложен на цвет, повторяясь так часто, как необходимо, чтобы заполнить элемент. Если pattern.png включает любую прозрачность, тогда green цвет будет виден за ним.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

В этом примере у нас есть черный фон с изображением «picture.png» сверху, изображение не повторяется ни одной из осей и расположено в верхнем левом углу. Положение / после позиции должно включать в себя размер фонового изображения, которое в этом случае устанавливается как ширина 600px и автоматически для высоты. Этот пример может хорошо работать с изображением функции, которое может исчезать в сплошной цвет.

ПРИМЕЧАНИЕ. Использование свойства shorthand background сбрасывает все ранее заданные значения свойств фона, даже если значение не задано. Если вы хотите изменить ранее заданное значение свойства фона, вместо этого используйте свойство longhand.

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

Свойство background-position используется для указания начальной позиции для фонового изображения или градиента

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

Позиция устанавливается с использованием координаты X и Y и устанавливается с использованием любого из единиц, используемых в CSS.

Единицы в CSS могут быть указаны различными способами (см. Здесь ).

Свойства позиции фокуса

В дополнение к сокращенному свойству выше, можно также использовать свойства background-position-x и background-position-y . Это позволяет вам управлять положениями x или y отдельно.

ПРИМЕЧАНИЕ. Это поддерживается во всех браузерах, кроме Firefox (версии 31-48) 2 . Firefox 49, который будет выпущен в сентябре 2016 года, будет поддерживать эти свойства. До тех пор в этом ответе «Переполнение стека» есть взлома Firefox.

Справочное приложение

Свойство background-attachment устанавливает, фиксировано ли фоновое изображение или прокручивается с остальной частью страницы.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Примеры

background-attachment: прокрутка

Поведение по умолчанию, когда тело прокручивается, прокручивает фон:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

background-attachment: исправлено

Фоновое изображение будет зафиксировано и не будет перемещаться при прокрутке тела:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

background-attachment: local

Фоновое изображение div будет прокручиваться при прокрутке содержимого div.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Повторение фона

Свойство background-repeat устанавливает, если / как фоновое изображение будет повторяться.

По умолчанию фоновое изображение повторяется как по вертикали, так и по горизонтали.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Вот как background-repeat: repeat-y выглядит так:

Цвет фона с непрозрачностью

Если вы установите opacity элемента, это повлияет на все его дочерние элементы. Чтобы установить непрозрачность только на фоне элемента, вам придется использовать цвета RGBA. Следующий пример будет иметь черный фон с 0,6 непрозрачностью.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

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

В CSS3 мы можем складывать несколько фона в один и тот же элемент.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Изображения будут складываться поверх друг друга с первым фоном сверху и последним фоном сзади. img_1 будет сверху, img_2 и img_3 будут внизу.

Мы также можем использовать свойство стенографии фона для этого:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Мы также можем складывать изображения и градиенты:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• демонстрация

Свойство background-origin

Свойство background-origin указывает, где находится фоновое изображение.

Примечание. Если для свойства background-attachment установлено значение fixed , это свойство не действует.

Значение по умолчанию: padding-box

Возможные значения:

• padding-box - позиция относительно поля заполнения
• border-box - позиция относительно поля границы
• content-box - позиция относительно поля содержимого
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Результат:

Больше:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Фоновый клип

Определение и использование: свойство background-clip указывает область рисования фона.

Значение по умолчанию: border-box

Ценности

• border-box - значение по умолчанию. Это позволяет фону полностью простираться до внешнего края границы элемента.
• padding-box зажимает фон на внешнем краю прокладки элемента и не позволяет ему растягиваться на границе;
• content-box фиксирует фон на краю окна содержимого.
• inherit применяет настройку родителя к выбранному элементу.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Размер фона

Общий обзор

Свойство background-size позволяет управлять масштабированием background-image . Он принимает до двух значений, которые определяют масштаб / размер результирующего изображения в вертикальном и горизонтальном направлениях. Если свойство отсутствует, считается ее auto как в width и height .

auto будет поддерживать соотношение сторон изображения, если оно может быть определено. Высота необязательна и может считаться auto . Таким образом, на изображении 256 px × 256 px все последующие настройки background-size давали бы изображение с высотой и шириной 50 px:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Итак, если мы начали со следующего изображения (имеющего упомянутый размер 256 px × 256 px),

мы получим 50 пикселей × 50 пикселей на экране пользователя, который находится на фоне нашего элемента:

Можно также использовать процентные значения для масштабирования изображения по отношению к элементу. Следующий пример привел бы к обратному изображению 200 px × 133 px:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Поведение зависит от background-origin .

Сохранение соотношения сторон

Последний пример в предыдущем разделе потерял первоначальное соотношение сторон. Круг попал в эллипс, квадрат в прямоугольник, треугольник в другой треугольник.

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

Яйца для contain и cover

Извините за плохой каламбур, но мы собираемся использовать фотографию дня для Biswarup Ganguly для демонстрации. Допустим, что это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации мы собираемся принять соотношение 16 × 9.

Мы хотим использовать вышеупомянутую картину дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4x3. Мы могли бы установить свойство background-size для определенной фиксированной длины, но мы сосредоточимся на contain и cover . Обратите внимание, что я также предполагаю, что мы не изменяли ширину и / или высоту body .

contain

contain

Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон (если оно имеется) до самого большого размера, чтобы его ширина и высота могли вписываться в область фонового позиционирования.

Это гарантирует, что фоновое изображение всегда полностью содержится в области фонового позиционирования, однако в этом случае может быть пустое пространство, заполненное background-color :

cover

cover

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

Это гарантирует, что фоновое изображение покрывает все. Не будет видимого background-color , но в зависимости от соотношения экрана большая часть вашего изображения может быть отключена:

Демонстрация с фактическим кодом

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Свойство background-blend-mode

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

См. Результат здесь: https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS Синтаксис: background-blend-mode: normal | умножить | экран | наложение | темные | свет | цвет-додж | насыщение | цвет | светимость;