Как наложить изображение с цветом в 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
}
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;
}
#header.overlay {
background-color: SlateGray;
position:relative;
width: 100%;
height: 100%;
opacity: 0.20;
-moz-opacity: 20%;
-webkit-opacity: 20%;
z-index: 2;
}
что-то вроде этого. Просто добавьте overlay
класс к заголовку, очевидно.
используйте 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
}
Если вы не возражаете использовать абсолютное позиционирование, вы можете расположить фоновое изображение, а затем добавить наложение с помощью непрозрачности.
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/
В 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;
}
вы можете попробовать похожие, как это
вы можете использовать отрицательную полупрозрачную границу 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"/>
это решение требует, чтобы вы знали точные размеры покрываемых объектов.