悬停时使背景图像变暗答案

【问题标题】：Darken background image on hover悬停时使背景图像变暗
【发布时间】：2013-07-05 05:27:13
【问题描述】：

我如何在悬停时背景图像变暗而不制作新的更暗图像？

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/

【问题讨论】：

检查这可能会有所帮助：stackoverflow.com/questions/11396753/…

标签： html css

【解决方案1】：

类似，但又有点不同。

将图像设为 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;
}

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

感谢 Robert Byers 的 jsfiddle

【讨论】：

这是唯一适用于任何形状图像的答案。如果您的图像是矩形或圆形，其他一些答案的技巧将起作用。但这适用于任何形状。这个答案只是缺少小提琴。这里：jsfiddle.net/cmL1tsjh
像魅力一样工作！我唯一建议更改的是将所有过渡移动到img，因为当您将光标从图像上移开时，缓动会减少。
请注意，如果您不幸不得不支持它，这将不适用于 IE11。

【解决方案2】：

这个怎么样，使用覆盖？

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

Demo

【讨论】：

您对不规则形状的图像有想法吗？我有一些五边形图标，我想在点击时对其进行动画处理，这样您就可以获得“按下按钮的感觉”。我想知道我是否应该为每个图标制作另一个 img，或者我可以用一个透明的来做。

【解决方案3】：

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

compatibility in modern browsers 相当不错 - 在撰写本文时为 95%，但低于其他答案。

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

&lt;img src='https://via.placeholder.com/300'&gt;

【讨论】：

过滤选项很棒

【解决方案4】：

这是一个“阴影”类，您可以像这样直接将其添加到任何<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;
}

【讨论】：

【解决方案5】：

你可以用这个：

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

见于：https://stackoverflow.com/a/24084708/8953378

【讨论】：

当您只想加深颜色但不知道颜色并且由于其他原因无法更改不透明度时，这很好
这是一个非常好的解决方案，它具有强大的浏览器支持，并且比使用转换或覆盖更好。适用于所有浏览器并自动具有正确的边框半径并且是 颜色不可知 这非常好！！

【解决方案6】：

如果您想使图像变暗，请使用具有rgba 和opacity 属性的叠加元素，这将使您的图像变暗...

Demo

<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 伪......

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

在图像的深色叠加层上使用一些内容

这里我使用带有z-index 的CSS 定位技术将内容覆盖在变暗的div 元素上。 Demo 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;
}

【讨论】：

【解决方案7】：

你可以使用opacity:

.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

【讨论】：

如果我想保持原来的不透明度并在悬停时让它变暗怎么办？
然后你可以使用另一个更暗的图像，或者放置一个父容器然后使那个容器变暗（不是图像）。

【解决方案8】：

试试这段代码。

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

【讨论】：

【解决方案9】：

添加css：

.image{
    opacity:.5;
}

.image:hover{
    // CSS properties
    opacity:1;
}

【讨论】：

不做新图怎么样？

【解决方案10】：

试试这个

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>

【讨论】：

【解决方案11】：

试试下面的代码：

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

【讨论】：

【解决方案12】：

.image:hover {
   background: #000;
    width: 58px;
    height: 58px;
    border-radius:60px;

}

你会变黑

【讨论】：

不做新图怎么样？

【解决方案13】：

不添加额外叠加元素或使用两个图像的最简单方法是使用 :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;
}

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

【讨论】：

【解决方案14】：

如果您必须使用当前图像并获得较暗的图像，那么您需要创建一个新图像。否则，您可以简单地降低 .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');
}
}

【讨论】：

【解决方案15】：

我会在图像周围添加一个 div，并在悬停时更改图像的不透明度，并在悬停时为 div 添加一个插入框阴影。

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

<div class="image"><img src="image.jpg" /></div>

【讨论】：