<分区>
<分区>
我有一个帖子轮播，我在其中显示存档帖子。
<div class="col-md-12">
<div class="post--small mb-4">
<img src="assets/images/Layer%2014.png" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">
Ahmedabad Investor CampFinal Disscusion
</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
和CSS
.post__title, .post:link, .post:visited {
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
display: block;
}
.post__img {
position: relative;
}
.post__img::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}
我试图用任何额外的 div 在图像上实现叠加，所以我使用了::before element 。我认为我所做的一切都是正确的，但这段代码不起作用。
请帮忙，提前谢谢
最佳答案
这就是我通常进行图像叠加的方式，我尽量不要过多地编辑您的代码，希望这对您有所帮助:https://jsfiddle.net/jbgvaqtx/23/
HTML
<div class="col-md-12">
<div class="post--small mb-4">
<img src="https://picsum.photos/seed/picsum/200/300" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">Ahmedabad Investor CampFinal Disscusion</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
CSS
.post__title,
.post:link,
.post:visited {
display: block;
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
.post__img {
position: absolute;
cursor: pointer;
height: 10)%;
width: 100%;
pointer-events: all;
}
.post__img:hover ~ .post__body{
opacity: 1 !important;
}
.post__body{
position: relative;
display: block;
top: 0px;
left: 0px;
height: 100%;
width: 119px;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}
关于html - 使用::之前在图像上添加叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59710372/