Как сделать двухслойный background-image?

484
18 января 2017, 00:55

Что делать? Как добавить цвет снизу?

Answer 1

Для того, чтобы цвет фона смешивался с картинкой, используйте CSS-свойство background-blend-mode.

Допустим есть картинка

Применяем background-blend-mode: multiply;:

.cat { 
  width: 200px; 
  height: 200px; 
  background-image: url("https://i.stack.imgur.com/NkAMf.jpg"); 
  background-color: pink; 
  background-blend-mode: multiply; 
}
<div class="cat"> 
</div>

Подробней можете почитать здесь.

Единственное но: данное решение не поддерживается IE.

Answer 2

Как я понял, картинка прозрачная.

Значит единственное что нужно сделать - указать цвет в свойстве background одновременно с ссылкой на картинку:

body{ 
background:url('https://i.stack.imgur.com/Qb3KZ.png') no-repeat #000; 
 
}

Answer 3

мне помогло такое: z-index:100; color: #000;

READ ALSO
Как в CSS сделать выделение текста цветом?

Как в CSS сделать выделение текста цветом?

Как в CSS сделать выделение текста цветом? Цвет выделения может быть в RGBA-формате, те

408
Как сделать пункт меню не кликабельным, если он содержит подпункты?

Как сделать пункт меню не кликабельным, если он содержит подпункты?

Сайт сделан на WordPressОдин из пунктов меню имеет подпункты:

395
Можно ли использовать С++ для мобильных платформ?

Можно ли использовать С++ для мобильных платформ?

Можно ли использовать С++ для написания приложений под Android или iOS? Что для этого нужно? Знаю, что для этого лучше подходит Java, но все же, реально...

371
Найти начальное и конечное числа [требует правки]

Найти начальное и конечное числа [требует правки]

Помогите пожалуйста с этим заданием ! Нет идей как можно решить

401