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

цель

Я хочу, наложение цвета на этот элемент. Как я могу сделать это с помощью CSS?

код

HTML-код

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

в CSS

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

6 ответов

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

#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;
}
40
#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

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

6

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

обратите внимание, что слои в объявлении multi-background читаются так же, как они отображаются сверху вниз, поэтому сначала поместите наложение, а затем изображение 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
}
1

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

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/

0

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

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

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

0

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

.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"/>

это решение требует, чтобы вы знали точные размеры покрываемых объектов.

0