CSS3淡入淡出效果

a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url('../img/button.png') no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s; transition: background 300ms ease-in 2s; -webkit-transition-property: background; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 100ms; -moz-transition-property: background; -moz-transition-duration: 300ms; -moz-transition-timing-function: ease-in; -moz-transition-delay: 100ms; -o-transition-property: background; -o-transition-duration: 300ms; -o-transition-timing-function: ease-in; -o-transition-delay: 100ms; transition-property: background; transition-duration: 300ms; transition-timing-function: ease-in; transition-delay: 100ms; } a:hover { background:position: 0 -32px; } 

..目前它有滚动上/下的效果，但我想背景改变淡入淡出效果，我应该改变什么CSS？

谢谢！

Answer 1

您无法在两个背景图片之间切换，因为浏览器无法知道您要插入的内容。 正如你发现的，你可以转换背景的位置。 如果你希望图像在鼠标上淡入，我认为使用CSS转换的最好方法是将图像放在一个包含的元素上，然后在背景颜色上设置透明链接：

 span { background: url(button.png) no-repeat 0 0; } a { width: 32px; height: 32px; text-align: left; background: rgb(255,255,255); -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 200ms; -o-transition: background 300ms ease-in 200ms; transition: background 300ms ease-in 200ms; } a:hover { background: rgba(255,255,255,0); } 

Answer 2

滚动效果是通过在你的css中指定通用的“背景”属性，而不是更具体的背景图像。 通过设置背景属性，animation将在所有属性之间转换。背景颜色，背景图像，背景位置..等因此造成滚动效果..

例如

 a { -webkit-transition-property: background-image 300ms ease-in 200ms; -moz-transition-property: background-image 300ms ease-in 200ms; -o-transition-property: background-image 300ms ease-in 200ms; transition: background-image 300ms ease-in 200ms; } 

Answer 3

这是可能的，使用下面的结构：

 <li><a><span></span></a></li> <li><a><span></span></a></li> 

等等…

<li>包含<a>锚定标记，其中包含一个跨度，如上所示。 然后插入下面的CSS：

• 李获得position: relative;
• 给<a>标签一个height ， width
• 将<span> width和height为100％，以使<a>和<span>具有相同的尺寸
• <a>和<span>获取position: relative; 。
• 为每个元素分配相同的背景图像
• <a>标签将具有“OFF” background-position ，而<span>将具有“ON” background-poisiton 。
• 对于“OFF”状态，对于<span>使用不透明度0
• 对于“ON” :hover状态，对于<span>使用不透明度1
• 在<span>元素上设置-webkit或-moz转换

您将有能力使用过渡效果，同时仍然默认旧的background-position交换。 不要忘记插入IE alphafilter。