我想知道是否有一种方法可以在我的图像上添加一个黑色层,但让它稍微透明,这样你仍然可以看到图像。
我正在使用 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);
}
原文由 user7804189 发布,翻译遵循 CC BY-SA 4.0 许可协议
您必须将
.car-overlay
div 放在带有背景的 div 中。这是因为如果元素有背景图像和背景颜色,背景颜色将出现在背景图像后面。如果您不想更改您的 HTML 结构,您可以使用带有渐变而不是背景颜色的 CSS3 多重背景,因为您无法对背景颜色进行分层。