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

Я знаю, что это действительно старый поток, но он появляется в верхней части в 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

вам нужно затем обернуть элемент с изображением 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%;
}

попробуйте это. Работать на меня.

.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;
}

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

HTML

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

Сасс

.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. стиль: после псевдоэлемента, чтобы действовать в качестве вторичного фонового слоя.

почему так сложно? Ваше решение было почти правильным, за исключением того, что это способ проще сделать узор прозрачным и цвет фона сплошной. 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> 

вы можете использовать полупрозрачный пиксель, который вы можете создать, например здесь, даже в 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>