如何在不制作新的较暗图像的情况下在悬停时使背景图像变暗?
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/
怎么样,使用叠加?
.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
border-radius:30px;
}
如果必须使用当前图像并获得更暗的图像,则需要创建一个新图像。另外,你可以简单地减少.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');
}
}
我会在图像周围添加一个div,并在悬停时使图像更改为不透明度,并在悬停时为div添加插入框阴影。
img:hover{
opacity:.5;
}
.image:hover{
box-shadow: inset 10px 10px 100px 100px #000;
}
<div class="image"><img src="image.jpg" /></div>
你可以用这个:
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.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;
}
类似,但又有点不同。
使图像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
如果你想使图像变暗,请使用带有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
伪...
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
元素上的内容。 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;
}
添加CSS:
.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}
试试这个
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>
请尝试以下代码:
.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;
}
.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}
你会变暗
在不添加额外的叠加元素或使用两个图像的情况下,最简单的方法是使用: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;
}
当然,这在旧浏览器中不起作用;只是说它降级优雅!