应用css的filter写鼠标滑过成果
<div class="filter-div">
<img class="filter-img" src="../assets/images/01list.png"/>
</div>
<style>
.filter-div {
width: 67px;
height: 50px;
background: #fff;
&:hover {
background: #5d7aae;
}
}
.filter-img {
width: 67px;
height: 50px;
&:hover {
filter: brightness(100);
}
}
</style>
鼠标没有放上之前
鼠标放上之后
这里用到css filter:brightness(100)
给图片利用一种线性乘法,使其看起来更亮或更暗。如果值是0%或者0,图像会全黑。值是100%,则图像无变动。其余的值对应线性乘数成果。值超过100%也是能够的,图像会比原来更亮。如果没有设定值,默认是1,如果想染图片设置成红色,值为100。