我想清除背景图像上的深色线性渐变,但尝试了它不起作用,它也有闪烁问题。
.image {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
border-radius: 10px;
transition: background 0.2s ease;
}
.image:hover {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
background-size: cover;
}
<div class="image">
</div>
最佳答案
使用 :before 尝试一下
.image {
position:relative;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
border-radius: 10px;
}
.image:before{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:'';
border-radius: 10px;
opacity:1;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
transition: opacity 0.2s ease;
}
.image:hover:before{
opacity:0;
}
<div class="image"></div>
关于html - css悬停以清除背景上的线性渐变失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53434788/