CSS覆盖的背景图像
[英]background image with overlay css
问题描述
我如何像这样的示例图片一样在CSS中设计带有叠加层的背景图片。
这里的代码。 我想将tour课程添加到背景图像和叠加效果。
<div class="tour">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
4 个解决方案
解决方案1
1 已采纳 2016-09-02 09:21:38
您可以使用此代码
的HTML
<div id="wrapper">
<img src="image-file" alt="">
<div class="overlay"></div>
</div>
的CSS
#wrapper {
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
z-index: 999;
}
解决方案2
0 2016-09-02 09:18:53
您应该在问题中添加更多信息，但这是您想要的吗？
CSS：
.background {
background:url('BackgroundImage.png');
}
.layer {
background-color: rgba(248, 247, 216, 0.7)
width: 100%;
height: 100%;
}
对此的HTML：
<div class="background">
<div class="layer">
</div>
希望能帮助到你 ：）
解决方案3
0 2016-09-02 09:20:12
它是这样的：
<style>
.div-image{
height: 200px;
width: 400px;
background-image: url(demo.jpg);
background-repeat: no-repeat;
}
.overlay{
height: 200px;
width: 400px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 255,0.5);
}
</style>
<body>
<div class="div-image"></div>
<div class="overlay"></div>
</body>
解决方案4
0 2016-09-02 09:29:59
尝试以下代码
的HTML
<div class="img-wrapper">
<img src=".." />
</div>
样式
.img-wrapper {
position: relative;
}
.img-wrapper:after {
content: "";
background-color: rgba(37,131,173,0.5);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
带图像叠加层的CSS背景渐变
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.