Полупрозрачный цветной слой поверх фонового изображения?

У меня есть DIV, и я хотел бы использовать шаблон в качестве фона. Этот шаблон серый. Поэтому, чтобы сделать его немного приятнее, я бы хотел нанести легкий прозрачный цветной «слой» поверх. Ниже я попробовал, но это не сработало. Есть ли способ нанести цветной слой поверх фонового изображения?

Вот мой CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Вот:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML для этого:

<div class="background">
    <div class="layer">
    </div>
</div>

Конечно, вам нужно определить ширину и высоту для .backgroundкласса, если внутри него нет других элементов

Я знаю, что это действительно старая тема, но она отображается вверху в Google, так что вот еще один вариант.

Это чистый CSS и не требует дополнительного HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Существует удивительное количество применений функции box-shadow.

Из CSS-хитрости ... есть один шаг, чтобы сделать это без z-индексации и добавления псевдоэлементов - требуется линейный градиент, который, я думаю, означает, что вам нужна поддержка CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

Вы также можете использовать линейный градиент и изображение: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Это потому, что функция линейного градиента создает изображение, которое добавляется в фоновый стек. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Попробуй это. Работает для меня.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Затем вам нужен элемент обертки с изображением bg и в нем элемент содержимого с цветом bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

и CSS:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

Я использовал это как способ применения цветовых оттенков, так и градиентов к изображениям, чтобы упростить стиль динамического наложения текста для удобочитаемости, когда вы не можете управлять цветовыми профилями изображения. Вам не нужно беспокоиться о z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Надеюсь, поможет

Смотрите мой ответ на https://stackoverflow.com/a/18471979/193494 для всестороннего обзора возможных решений:

1. используя несколько фонов с линейным градиентом,
2. несколько фонов с сгенерированным PNG, или
3. стилизация an: после псевдоэлемента, чтобы действовать как вторичный фоновый слой.

Почему так сложно? Ваше решение было почти правильным, за исключением того, что способ сделать шаблон прозрачным, а фон - сплошным . PNG может содержать прозрачные пленки. Поэтому используйте Photoshop, чтобы сделать рисунок прозрачным, установив слой на 70% и сохранив изображение. Тогда вам нужен только один селектор. Работает кросс-браузер.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

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

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

ПОЖАЛУЙСТА, ПОДОЖДИТЕ МИНУТУ! Это займет некоторое время, чтобы загрузить внешние шаблоны.

Этот сайт кажется довольно медленным ...

Вы можете использовать полупрозрачный пиксель, который вы можете сгенерировать, например, здесь , даже в base64. Вот пример с белым 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• без загрузки

• без лишних HTML

• я думаю, загрузка должна быть быстрее, чем box-shadow или линейный градиент

Вот более простой трюк только с css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Еще один с SVG в качестве встроенного оверлейного изображения (примечание: если вы используете #внутри svg-кода, вы должны urlencode это!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Я просто использовал свойство css background-image на целевом фоне div.
Обратите внимание, что background-image принимает только градиентные цветовые функции.
Поэтому я использовал линейный градиент, добавляя один и тот же нужный цвет наложения дважды (используйте последнее значение rgba для управления непрозрачностью цвета).

Кроме того, найдены эти два полезных ресурса для:

1. Добавьте текст (или div с любым другим контентом) поверх фонового изображения: изображение героя
2. Размытие только фонового изображения, без размытия div сверху: размытое фоновое изображение

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

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

Вместо того чтобы делать

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Ты можешь сделать:

background: url('../img/bg/diagonalnoise.png');

Затем создайте новый стиль для цвета непрозрачности:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Измените непрозрачность на любое число ниже 1. Затем вы сделаете этот цветовой стиль того же размера, что и ваше изображение. Он должен работать.