12)Изображение CSS

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

• background-image
• background-position
• background-size (CSS3)
• background-repeat
• background-attachment
• background-origin (CSS3)
• background-clip (CSS3)
• background-color

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

Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша /.

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

background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;

Свойство background-color для установки фонового цвета

Для обозначения фонового цвета элемента используется свойство background-color. По умолчанию все элементы имеют прозрачный фон. Рассмотрим синтаксис:

background-color: цвет | transparent;    

Значение transparent устанавливает прозрачный фон. Под понятием «цвет» может быть запись цвета в допустимом формате для CSS. Допустимыми форматами являются: шестнадцатеричный код, название цвета, RGB, RGBA, HSL, HSLA. Далее пример, где используется три формата записи черного цвета:

div {
    background-color: #000;
} 
div {
    background-color: rgb(0, 0, 0);
}
div {
    background-color: black;
}    

Свойство background-image для установки фонового изображения

Свойство background-image используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона при помощи свойства background-color, то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

background-image: url|none;    

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

1. url – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
2. none – фоновое изображение не будет отображаться. Оно по умолчанию;
3. linear-gradient() – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
4. radial-gradient() – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
5. repeating-linear-gradient() – повторяет линейный градиент;
6. repeating-radial-gradient() – повторяет радиальный градиент.

Пример:

body {
    background-image: url("bg.jpg");
}    

Свойство background-attachment устанавливает прокрутку фона

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

background-attachment: fixed | local | scroll | initial | inherit;    

Как видно из вышеприведенного кода, данное свойство имеет пять значений. Что они означают:

1. scroll – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
2. fixed – фоновое изображение не будет прокручиваться вместе со страницей.
3. local – фоновое изображение будет прокручиваться вместе с содержимым элемента.
4. initial – устанавливается значение по умолчанию.
5. inherit – наследует значение свойства родителя.

<div style = "height: 3000px">
    Какой-то текста
</div> 

body {
    background-image: url("bg.png"); /* Путь к изображению, которое используется для фона*/
    background-attachment: fixed; /* Фон прокручиваться не будет */
}    

Свойство background-blend-mode определяет режим наложения фонового изображения

Определяет, как будет накладываться одно фоновое изображение, на другое или на фоновый цвет. То есть, первым задается какой-то фон, при помощи свойства background-image, вторым задается фоновое изображение, для которого мы определяем стиль наложения. Позволительно указывать несколько фоновых изображений, т.е. больше двух при помощи background-image и в background-blend-mode использовать ряд значений, перечисленных через запятую. Стоит обратить внимание на версии браузеров, с которых начинается поддержка свойства background-blend-mode, например, Internet Explorer не поддерживает его вовсе. Рассмотрим синтаксис:

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

Расшифруем все эти значения. Я не расписывал их, так как это достаточно сложно описать, поэтому каждое значение лучше рассмотреть экспериментальным путем, так будет понятнее.

1. normal – Обычный. Режим по умолчанию.
2. multiply – Умножение.
3. screen – Осветление.
4. overlay – Перекрытие.
5. darken – Темнее.
6. lighten – Светлее.
7. color-dodge – Осветление основы.
8. color-burn – Затемнение основы.
9. hard-light – Направленный свет.
10. soft-light – Рассеянный свет.
11. difference – Разница.
12. exclusion – Исключение.
13. hue – Тон.
14. saturation – Насыщенность.
15. color – Цвет.
16. luminosity – Яркость.

Далее пример использования свойства:

div { 
  width: 500px;
  height: 500px;
  background-image: url("bg.jpg"), url("superimposed.png");
  background-blend-mode: darken;
}    

Свойство background-clip определяет отображение фона под границами

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

1. border-box – фон будет отображаться под рамкой;
2. padding-box – фон будет отображаться внутри рамки;
3. content-box – фон будет отображаться внутри контента.

Синтаксис свойства background-clip:

background-clip: [border-box |padding-box | content-box];    

Далее рассмотрим наглядный пример использования свойства background-clip:

.clip {
    background: #f1f1f1;
    border: 20px dotted #000000;
    background-clip: border-box;
    padding: 10px;
    height: 50px;
}    

Свойство background-origin для позиционирования фона

С помощью свойства background-origin можно позиционировать фон, при этом свойство background-attachment не должно иметь значение fixed. Значения, которые принимает background-origin:

1. border-box – позиционирование фона осуществляется относительно границы;
2. padding-box – позиционирование фона осуществляется относительно края элемента, при чем толщина границы учитывается;
3. content-box – позиционирование фона осуществляется относительно содержимого элемента;

Синтаксис свойства background-origin:

background-origin: [border-box |padding-box | content-box];    

Рассмотрим пример:

.origin {
    background: url("img.jpg") no-repeat;
    background-origin: content-box;
    border: 10px solid #000;
    padding: 10px;
    height: 100px;
}    

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

С помощью свойства background-position достаточно просто устанавливается начальное положение фона. Это свойство имеет два значения, которые могут быть заданы ключевым словом, в процентах или в иных значениях допустимых в CSS. Первое значение определяет положение по горизонтали (left, center, right), второе – по вертикали (top, center, bottom). Через запятую можно указывать значения для нескольких фонов. Синтаксис свойства background-position следующий:

background-position: значение1 значение2;    

При указании одного ключевого слова, второе будет равно center. Комбинации ключевых слов могут быть следующими:

1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

Рассмотрим пример:

body {
    background-image: url(bg.jpg); 
    background-position: 50% 50%;
}    

Свойство background-repeat устанавливает повторение фона

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

background-repeat: значение;    

Свойство background-repeat принимает 6 значений:

1. repeat – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
2. repeat-x – Фоновое изображение повторяется только по горизонтали;
3. repeat-y – Фоновое изображение повторяется только по вертикали;
4. no-repeat – Фоновое изображение не повторяется. Изображение будет показано только один раз;
5. space – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
6. round – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);

Рассмотрим пример:

body { 
    background-image: url(bg.jpg); 
    background-repeat: repeat; 
}    

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство background-size. Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение auto. Синтаксис:

background-size: значение1 значение2;    

Значения могут задаваться в любых разрешенных в CSS единицах, процентах и ключевыми словами:

1. cover – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
2. contain – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
3. auto – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

Рассмотрим пример:

div {
    background: url(bg.jpg); 
    background-size: cover;   
}    

Практика она же домашняя работа.

1. создать сайт  1— КЛИК
2. ссылка на макет КЛИК