我想知道是否有一种方法可以在我的图像上添加黑色图层,但是它有点透明,所以你仍然可以看到图像。
我正在使用Bootstrap 4&下面是我正在使用的代码,包括CSS:)
任何帮助将不胜感激。谢谢
<div class="row">
<div class="col-md-6">
<div class="card-overlay" style="background-image: url('img/dirt1.jpg')">
<div class="white-text text-center">
<div class="card-block">
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat
fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus
minus error nisi architecto nulla ipsum dignissimos. Odit
sed qui, dolorum!.
</p>
<a class="btn btn-primary" href="...">Read More</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.card-overlay {
background: rgba(0, 0, 0, 0.5);
}
答案 0 :(得分:3)
您必须将.car-overlay
div放在具有背景的div中。这是因为如果元素具有背景图像和背景颜色,则背景颜色将显示在背景图像后面。
.card-overlay {
background: rgba(0, 0, 0, 0.5);
}
<div class="row">
<div class="col-md-6">
<div style="background-image: url('https://www.placecage.com/c/460/300');background-size:cover;">
<div class="card-overlay">
<div class="white-text text-center">
<div class="card-block">
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit
sed qui, dolorum!.</p>
<a class="btn btn-primary" href="...">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
如果您不想更改HTML结构,可以使用带有渐变而不是背景颜色的CSS3多个背景,因为您无法对背景颜色进行分层。
.card-overlay {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('https://www.placecage.com/c/460/300');
}
<div class="row">
<div class="col-md-6">
<div class="card-overlay">
<div class="white-text text-center">
<div class="card-block">
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat
fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus
minus error nisi architecto nulla ipsum dignissimos. Odit
sed qui, dolorum!.</p>
<a class="btn btn-primary" href="...">Read More</a>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:1)
试试这个:
.card-overlay {position:relative;}
.card-overlay:before{ background: rgba(37, 35, 35, 0.07); position: absolute; height: 100%; left: 0; top: 0; margin: 0; width: 100%; content: ' '; display: block;}
答案 2 :(得分:1)
您可以将after/before
用于此
.card-overlay{
position: relative;
}
.card-overlay:after {
content:'';
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
答案 3 :(得分:1)
CSS
.container { background-color: #000000;}
.container img { opacity: 0.2; }
HTML
<div class="container">
<img src="#">
</div>