在悬停时变暗背景图像

Question

如何在不制作新的较暗图像的情况下在悬停时使背景图像变暗？

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

JSFiddle链接:http://jsfiddle.net/qrmqM/1/

Answer 1

类似,但又有点不同.

使图像100%不透明,因此很清楚.然后在img悬停时将其降低到你想要的不透明度.在这个例子中,我还添加了缓动以实现良好的转换.

img {
    -webkit-filter: brightness(100%);
}

img:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

这样做,希望有所帮助.

谢谢Robert Byers为你的jsfiddle

Answer 2

怎么样,使用叠加？

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

演示

Answer 3

如果您想使图像变暗,请使用覆盖元素rgba和opacity属性,这会使图像变暗...

演示

<div><span></span></div>

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div span {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover span {
    opacity: 1;
}

注意:我也使用CSS3过渡来获得平滑的暗效果

如果任何人在DOM中保存一个额外的元素比你可以使用:before或:after伪也..

演示2

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover:after {
    opacity: 1;
}

在图像的暗色覆盖上使用一些内容

这里使用CSS定位技术z-index覆盖黑暗div元素上的内容. 演示3

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
    position: relative;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;
}

div:hover:after {
    opacity: 1;
}

div p {
    color: #fff;
    z-index: 1;
    position: relative;
}

Answer 4

通过使用新的Filter CSS 选项，我能够比上述答案更容易地实现这一点，并且在一行代码中。

它在现代浏览器中的兼容性非常好 - 在撰写本文时为 95%，但低于其他答案。

img:hover{
  filter: brightness(50%);
}

<img src='https://via.placeholder.com/300'>

Answer 5

您可以使用不透明度:

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.5;
}

.image:hover{
    opacity:1;
}

的jsfiddle

Answer 6

你可以使用这个：

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

如上所示：https : //stackoverflow.com/a/24084708/8953378

Answer 7

这是一个“shade”类，您可以将其直接添加到任何<img>标签，如下所示

<img src="imgs/myimg.png" class="shade">

<img src="imgs/myimg.png" class="shade">