javascript - 将图像悬停使其变暗

Question

只是想知道悬停图像如何使其变暗？使用 jquery/css。

我的CSS

.img-files{
    background:url("/Images/syzs.png") no-repeat; 
    position:absolute;
    background-size:90%;       
    width: 100px;       
    height: 150px;
    text-indent: -9999px; 
    z-index:1;
}

Answer 1

你可以使用带有不透明度属性的黑色背景让它变得更好

Demo

.dark {
    display: inline-block;
    background: black;
}

.dark img {
    display: block;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

.dark:hover img {
    opacity: 0.5;
}