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

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

178 голосов
/ 07 февраля 2012

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

Вот мой CSS: 

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

Ответы [ 11 ]

1 голос
/ 06 октября 2018

Вот более простой трюк только с 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>
Страница:
...