Html 悬停时使背景图像变暗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17481660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Darken background image on hover
提问by John Smith
How would I darken a background imageon hover withoutmaking a new darker image?
如何在不制作新的较暗图像的情况下在悬停时使背景图像变暗？
CSS:
CSS：
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
}
JSFiddle link: http://jsfiddle.net/qrmqM/1/
JSFiddle 链接：http: //jsfiddle.net/qrmqM/1/
采纳答案by PSL
回答by Sabba Keynejad
Similar, but again a little bit different.
相似，但又有点不同。
Make the image 100% opacity so it is clear. And then on img hover reduce it to the opacity you want. In this example, I have also added easing for a nice transition.
使图像 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;
}
That will do it, Hope that helps.
这样就可以了，希望有所帮助。
Thank you Robert Byers for your jsfiddle
谢谢罗伯特·拜尔斯为您的jsfiddle
回答by Mr. Alien
If you want to darken the image, use an overlay element with rgbaand opacityproperties which will darken your image...
如果您想使图像变暗，请使用带有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;
}
Note: Am also using CSS3 transitions for smooth dark effect
注意：我也在使用 CSS3 过渡来获得平滑的暗效果
If anyone one to save an extra element in the DOM than you can use :beforeor :afterpseudo as well..
如果有人在 DOM 中保存一个额外的元素而不是你可以使用:before或:after伪的..
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;
}
Using some content over the darkened overlay of the image
在图像变暗的覆盖层上使用一些内容
Here am using CSS Positioning techniques with z-indexto overlay content over the darkened divelement.
Demo 3
这里使用 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;
}
回答by Vucko
回答by Alon Gouldman
you can use this:
你可以使用这个：
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
as seen on: https://stackoverflow.com/a/24084708/8953378
回答by Rory
I was able to achieve this more easily than the above answers and in a single line of code by using the new FilterCSS option.
通过使用新的FilterCSS 选项，我能够比上述答案更容易地实现这一点，并且在一行代码中。
It's compatibility in modern browsersis pretty good - 95% at time of writing, though less than the other answers.
它在现代浏览器中的兼容性非常好 - 在撰写本文时为 95%，但低于其他答案。
img:hover{
filter: brightness(50%);
}<img src='https://via.placeholder.com/300'>回答by Falguni Panchal
try this
尝试这个
CSS
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
HTML
<div class="image"></div>
回答by Mohit Bhansali
Add css:
添加css：
.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}
回答by enam
Try following code:
尝试以下代码：
.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;
}
回答by Praveen
.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}
You will get darken
你会变黑
