如何在css中的另一个div上创建并放置半透明层

Question

我有一个名为image的图像类和一个名为主的半透明。

我想在css中创建一个semitransparent background颜色，这样可以通过它看到图像类中的图像

如何在css中创建这种半透明的颜色？

.semitransparent{
width:300px;
height:300px;
}
.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div

Answer 1

您可以使用"position:absolute"来放置覆盖层-您需要在文档和维度上找到位置。但这可能会很烦人，因为一旦窗户尺寸发生变化，你就必须不断地进行修复。你听说过css过滤器：blur吗？只要有一个类

.blur{ filter: blur(4px) }

然后将该类添加/删除到您的图像中。哦，等等。。支持范围不够广：-/

根据您可能具有或可能实施的约束，有多种方法可以避免必须修复覆盖层以保持与底层元素的位置/尺寸匹配。

.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }

然后将覆盖物放置在图像DIV.内

<div class="image"><div class="overlay"></div><img src="…" …></div>

Answer 2

可以使用以下代码-

<div class="image">
<div class="semitransparent">
</div>
</div>
.semitransparent {
background: black;
opacity: 0.5;
position: absolute;
top:0; left:0; right:0; bottom:0;
}
.image {
background-image:url(https://picsum.photos/300/300/?random);
width:300px;
height:300px;
position: relative;
}

Fiddle链接-https://jsfiddle.net/Lvhwmy31/

Answer 3

问题是，按照你开始的方式……不可能用z索引将子元素设置在父元素之上，这当然是一个明显的尝试。

无论如何，它有点像css忍者风格：(

你宁愿把它们都作为可能性，给父母一个相对的，覆盖一个绝对的，你就完成了。

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
.child1{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
.child2{ 
background-color: rgba(138, 43, 226, 0.6);
width:300px;
height:300px;
position: absolute;
top: 0px;
}
.parent {
position: relative;
height: 2000px;
}
</style>

Answer 4

.full {
background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
min-height: 300px;
}
.full {
background-size: cover;
position: relative;
}   
.full:hover .overlay-effect {
opacity: 1;
cursor: pointer;
}
.overlay-effect {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(259, 67, 95, 0.7);
overflow:hidden;
}
.full a
{
color: #fff;
}
.full h3 {
padding: 15px 30px;
}
@media screen and (max-width: 368px) {
.full{margin-bottom: 10px;}
}

<div class="full">
</div>
</div

Answer 5

检查此代码，根据需要更改"rgba"颜色。

<div class="semitransparent">
<div class="image">
</div>
</div
.semitransparent{
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
.image{
background-image:url(https://picsum.photos/300/300/?image=206);
width:300px;
height:300px;
}