Question

你好，我得到了这张要变暗的图像，当我将其悬停时，我希望它再次成为正常的不透明性。这就是我走的距离：

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
}
.man:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1;
}
.man:hover:after {
    opacity:1;
}

<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

无论如何相反，我该如何做，以使图像从一开始就变暗，并且悬停时正常，谢谢：）

Answer 1

有2种方法可以做到，检查答案，首先，如果您想保留所有样式并且只想还原它，然后反转悬停时的不透明度使用并且没有悬停行为，其次，如果您只是想使用图像变暗，使用

 img {
    filter: grayscale(100%);
 }

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
}
.man:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1;
}
.man:hover:after {
    opacity:0;
}

<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
    filter: grayscale(100%);
}
.man img:hover {
  filter: grayscale(0);
}

.man:hover:after {
    opacity:1;
}

<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

Answer 2

这个怎么样？

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
}
.man:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1;
}
.man:hover:after {
    opacity:0;
 }

<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

图像前的阴影和悬停时的阴影

2 个答案: