Background CSS: множественный фон, смешивание, blend-mode

5 (100%) 6 vote[s]

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

Другие значения background

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

  • attachment
  • clip
  • color
  • image
  • position
  • repeat
  • size (это свойство должно быть указано после <position>, разделенного символом ‘/’).

По поводу синтаксиса: можно прописывать каждые свойства отдельно:

width: 100%;
height: 300px;
/*значения background*/ 
background-image:url('picture.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;


Или одной строкой:

/*значения background*/
background:url("picture.jpg")center/cover no-repeat fixed;

Свойство background-size в короткой записи должно быть указано после <position> через ‘/’.

Добавление фона и других картинок в background

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

width: 100%;
height: 300px;
background: linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),
   url("landscape_result.jpg")center/cover fixed;

Эффекты смешивания blеnd-mode

В зависимости от порядка фоновых изображений, используем background-blend-mode. Разница между background-blend-mode и mix-blend-mode в том, что первый определяет режим смешивания изображения с каждым фоновым слоем, а второй смешивает цветной фон между сложенными фонами элементами HTML.

Теперь на примере: смешиваем при помощи background-blend-mode:

width: 100%;
height: 300px;
background: linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),
   url("picture.jpg")center/cover fixed;
background-blend-mode: color;

Если мы применим mix-blend-mode: color к изображениям, то ничего не произойдет:

Но если мы добавим надпись на изображение, то mix-blend-mode нужно применить к тексту, и получим смешивание (см. «Цветной текст на изображение«):

<style>
.element {
width: 100%;
height: 300px;
background:linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),url("picture.jpg")center/cover fixed;
  background-blend-mode: darken;	
}
.element h2 {
	color:  #0e7a02;
	background: linear-gradient(45deg,  #0062ff 40% ,  #f5cbcb 60% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
    mix-blend-mode: multiply;
}  
</style>
<div class = "element" >
	 <h2 id = "text"> Blend-mode </h2>
 </div>

Blend-mode

Теперь добавим еще картинку шириной 200px backgroundи разместим по центру:

background:linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),url("picture.jpg")center/cover fixed,url("sun.png")center/200px no-repeat;
  background-blend-mode: color;

Blend-mode

Теперь о порядке смешивания: мы указали blend-mode: color; , который будет применяться и к наложению пейзажа на градиент, и к наложению солнышка на пейзаж. Если мы добавим через запятую ещё одно значение, например color-dodge, то к пейзажу будет применено значение color, а к солнышку (относительно результата смешивания предыдущих слоев) color-dodge:

<style>
.element {
width: 100%;
height: 300px;
background:linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),url("picture.jpg")center/cover fixed,url("sun.png")center/200px no-repeat;
  background-blend-mode: color,color-dodge;
}
.element h2 {
	color:  #0e7a02;
	background: linear-gradient(45deg,  #0062ff 40% ,  #f5cbcb 60% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
        mix-blend-mode:exclusion;
}
</style>
<div class = "element" >
	 <h2 id = "text"> Blend-mode </h2>
 </div>

Blend-mode

При помощи фильтров можно получить разные нужные эффекты. Например, черно-белое изображение (используя черный градиент и blend-mode: color):

<style>
.element {
width: 100%;
height: 300px;
background:linear-gradient(135deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),url("picture.jpg")center/cover fixed,url("sun.png")center/200px no-repeat;;
  background-blend-mode: color;	
}
.element h2 {
	color:  #0e7a02;
	background: linear-gradient(45deg,  #0062ff 40% ,  #f5cbcb 60% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
        mix-blend-mode:exclusion;
}  
</style>
<div class = "element" >
	<h2 id = "text"> Blend-mode </h2>
 </div>

Blend-mode

! Свойство text-fill-color, которое мы использовали для заливки текста, пока что экспериментальное, и его не рекомендуют использовать в рабочем коде. Используется обязательно с префиксом  -webkit-.

Можно поиграть с фоном и изображениями, используя простенькую форму

Кликая по полю картинки, будет изменяться background-blend-mode (для изображений).

Кликая по надписи, будет изменяться mix-blend-mode (для текста).

Также можно менять цвета градиента (используется 2 цвета, без %), угол от 0 до 360 и альфа-канал для каждого цвета (от 0 до 1).

В форме можно вставлять свои URL картинок (например, https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png для маленькой и другой какой-нибудь фон).

Blend-mode

URL 1

URL 2

Альфа-канал

Альфа-канал

Угол градиента

Смотрите больше по теме:

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
Просмотры: 108

Популярные записи