CSS3背景图片转换

发布：2016/2/6 0:48:17作者：管理员来源：本站浏览次数：1237

我试图做一个“淡入淡出”的CSS transisition。但我不能得到这个与背景图工作...我有这样的CSS：

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
 }
 .title a:hover{
background: transparent;
background: url( CodeGo.net  repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

一起来看看：感谢您的帮助。
本文地址：CodeGo.net/423584/
-------------------------------------------------------------------------------------------------------------------------
1. 你可以转换background-image。使用下面的CSS的img

-webkit-transition: background-image 0.2s ease-in-out;
-moz-transition: background-image 0.2s ease-in-out;
-ms-transition: background-image 0.2s ease-in-out;
-o-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

这是由Opera和Safari的原生支持。 Firefox有没有它（bugzil.la。不确定IE浏览器。
2. 该解决方案（我用我自己发现）是一个忍者的把戏，我可以为您提供两种方法：首先，你需要做一个“容器”的<img>，它将包含正常和悬停状态的

<div class="images-container">
 <img src=" CodeGo.net 
 <img src=" CodeGo.net 
</div>

用CSS3选择器（如果这一个，“正常”状态将是优先个子的容器，或改变nth-child()序） CSS2溶液（之间的差异仅仅是少数选择）基本上，你需要隐藏的“正常”状态 CodeGo.net，并显示自己的“悬停”当你将鼠标悬停它就是这样，我希望找到
3. 不幸的是，你可以“跳变background-image，看动画的属性的W3C列表。你可能想要做一些技巧background-position，这里是一个例子。
4. 我已经想通了，工作解决方案如果你有一个列表项（或分区）只包含链接，让我们说这是为到Facebook，Twitter，ECT您的网页上的社会联系。和你一个sprite图片你可以这样做：

<li id="facebook"><a href="facebook.com"></a></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;
}

现在，所有你需要的是“不透明”下的“答：悬停”，并设置为1。

#facebook a:hover {
 opacity:1;
}

添加不透明度的渐变属性为每个浏览器“a”和“答：悬停”所以最终的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;
}

如果我正确地解释它应该让你有一个衰落的背景图按钮，希望它可以帮助至少！
5. 如果你的jQuery，你可以尝试BgSwitcher插件来切换背景图片与效果，它很容易例如：

$('.bgSwitch').bgswitcher({
  images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
  effect: "fade",
  interval: 10000
});

并添加自己的影响，请参阅添加效果类型
本文标题：CSS3背景图片转换
本文地址：CodeGo.net/423584/

　使用jQuery操作元素的属性与样式

CSS3之过渡Transition　

outsystems-js-eval-字符串转换成可执行代码 C# 对象转换成json C# json转换成对象 MSSql 自定义函数实现小写金额转换成大写（最高13位不包括小数点后两位） JS实现的base64加密解密和json对象和字符串的相互转换数组访问和转换-ThinkPHP V5 类型转换-ThinkPHP V5 在C#将image中的显示的图片转换成二进制 unix/linux时间戳转换 css3绘制向右箭头

柏港建站平台

柏港 CSS

柏港为您推荐了一些相关资讯