CSS3背景图像转换
CSS3背景图像转换
提问于 2012-02-28 22:05:07
我正在尝试使用CSS过渡来实现“淡入淡出”效果。但我不能让它与背景图像一起工作...
CSS：
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}回答 11
Stack Overflow用户
发布于 2013-05-18 08:55:36
您可以转换background-image。在img元素上使用下面的CSS：
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;Chrome、Opera和Safari本身就支持这一点。火狐还没有实现它(bugzil.la)。不确定IE。
Stack Overflow用户
发布于 2012-02-28 22:36:07
不幸的是，您不能在background-image上使用transition，请参阅w3c list of animatable properties。
你可能想用background-position做一些小把戏。
Stack Overflow用户
发布于 2013-02-26 14:25:40
我想出了一个对我有效的解决方案...
如果你有一个只包含链接的列表项(或div)，假设这是你页面上指向facebook、twitter等的社交链接。你使用的是一个精灵图片，你可以这样做：
<li id="facebook"><a href="facebook.com"></a></li>将“li”的背景设为您的按钮图像
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}然后将链接的背景图像设置为按钮的悬停状态。另外，将不透明度属性添加到此属性并将其设置为0。
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}现在你需要做的就是在"a:hover“下面设置"opacity”并将其设置为1。
#facebook a:hover {
opacity:1;
}将每个浏览器的不透明度过渡属性添加到"a“和"a:hover”中，这样最终的css将如下所示：
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}如果我的解释是正确的，应该会让你有一个褪色的背景图像按钮，希望它至少有帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9483364
复制相关文章
相似问题