57

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

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/

4

15 回答 15

76

类似，但又有点不同。

使图像 100% 不透明度，使其清晰。然后在 img hover 上将其降低到您想要的不透明度。在此示例中，我还添加了缓动以实现良好的过渡。

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;
}

这样就可以了，希望有帮助。

谢谢罗伯特·拜尔斯的jsfiddle

于 2015-04-14T08:07:34.043 回答
53

这个怎么样，使用覆盖？

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

演示

于 2013-07-05T05:31:29.737 回答
20

如果要使图像变暗，请使用具有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;
}
于 2013-07-05T05:34:13.527 回答
13

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

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

img:hover{
  filter: brightness(50%);
}
<img src='https://via.placeholder.com/300'>

于 2019-12-22T18:52:30.383 回答
8

您可以使用不透明度：

.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

于 2013-07-05T05:30:23.513 回答
7

你可以使用这个：

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

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

于 2019-05-01T11:52:54.353 回答
5

这是一个“阴影”类，您可以<img>像这样直接添加到任何标签

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

img.shade:hover {
    -webkit-filter: brightness(85%);
    -webkit-transition: all 10ms ease;
    -moz-transition: all 10ms ease;
    -o-transition: all 10ms ease;
    -ms-transition: all 10ms ease;
    transition: all 10ms ease;
}
于 2020-12-31T05:30:52.983 回答
2

添加CSS：

.image{
    opacity:.5;
}

.image:hover{
    // CSS properties
    opacity:1;
}
于 2013-07-05T05:29:21.690 回答
2

试试这个

http://jsfiddle.net/qrmqM/6/

CSS

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
      opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;

    border-radius:100px;
  opacity:1;
            filter:alpha(opacity=100);

}

HTML

<div class="image"></div>
于 2013-07-05T05:31:24.893 回答
2

试试下面的代码：

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

.image:hover{
    opacity:1;
}
于 2013-07-05T05:37:06.550 回答
1 
.image:hover {
   background: #000;
    width: 58px;
    height: 58px;
    border-radius:60px;

}

你会变黑

于 2013-07-05T05:29:24.083 回答
1

在不添加额外覆盖元素或使用两个图像的情况下，最简单的方法是使用 :before 或 :after 选择器。

.image {
    position: relative;
}
.image:hover:after {
    content: ""; 
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    top: 0;
    left:0;
}

这当然不适用于旧版浏览器；只是说它优雅地退化！

于 2014-01-04T05:43:02.770 回答
0

如果您必须使用当前图像并获得较暗的图像，那么您需要创建一个新图像。否则，您可以简单地降低 .image 类的不透明度，而在 .image:hover 中，您可以为不透明度设置更高的值。但是没有悬停的图像会显得苍白。

最好的方法是创建两个图像并添加以下内容：

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.9;   
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png');
}
}
于 2013-07-05T05:48:58.893 回答
0

我会在图像周围添加一个 div 并在悬停时使图像的不透明度发生变化，并在悬停时向 div 添加一个插入框阴影。

img:hover{
    opacity:.5;
}
.image:hover{
    box-shadow: inset 10px 10px 100px 100px #000;
}

<div class="image"><img src="image.jpg" /></div>
于 2017-03-02T23:15:22.430 回答
-2

试试这个代码。

img:hover
{
    box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -webkit-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -moz-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -o-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
}
于 2017-06-23T14:06:58.117 回答