当时要实现的一个效果是:一个盒子里有图片,文字,active这个盒子时,盒子的背景色变成某个颜色,要实现的效果是:
最开始的代码是:
<div class="list-item">
<div class="item-wrapper">
<img src="./images/taohua.jpeg">
<div>标题</div>
<div>时间</div>
</div>
</div>
css:
.list-item {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #ededed;
position: relative;
cursor: pointer;
}
.list-item:active {
background: rgba(0, 0, 0, .5);
border: 1px solid #ccc;
}
.item-wrapper {
width: 100%;
height: 100%;
}
.item-wrapper img {
width: 100%;
}
结果效果为:
这是因为本来图片的背景色是白色的,最后修改代码为:
.list-item:active::before {
content: ' ';
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
这样就可以实现所需的效果了。