Как наложить изображение с цветом в CSS?

Ответ 1

Вы должны использовать rgba для наложения вашего элемента на photos.rgba - это способ объявить цвет в CSS, который включает поддержку альфа-прозрачности. вы можете использовать .row в качестве наложения, например:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

Ответ 2

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

Что-то вроде этого. Просто добавьте класс overlay в заголовок, очевидно.

Ответ 3

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

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

Ответ 4

Используйте mutple backgorund для элемента и используйте линейный градиент в качестве наложения цвета, объявляя как начальные, так и конечные цветовые остановки как одно и то же значение.

Обратите внимание, что слои в многоэкранном объявлении читаются так, как будто они отображаются сверху вниз, поэтому сначала наложите наложение, затем ваше изображение bg:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

Ответ 5

Вы можете использовать функцию hue-rotate в свойстве filter. Это довольно неясное измерение, вам нужно знать, сколько градусов вокруг цветового круга вам нужно переместить, чтобы получить желаемый оттенок, например:

header { filter: hue-rotate(90deg); }

Найдя правильный оттенок, вы можете объединить функции brightness и grayscale или saturate, чтобы найти правильный оттенок, например:

header { filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

Свойство filter имеет префикс поставщика в Webkit, поэтому окончательный код будет выглядеть так:

header { -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%); filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

Ответ 6

Если вы не против использования абсолютного позиционирования, вы можете поместить фоновое изображение, а затем добавить наложение с использованием непрозрачности.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

Смотрите здесь: http://jsfiddle.net/4yh9L/

Ответ 7

В helpshift они использовали класс home-page как

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

вы можете попробовать похожие на это