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?

谢谢!

您无法在两个背景图片之间切换,因为浏览器无法知道您要插入的内容。 正如你发现的,你可以转换背景的位置。 如果你希望图像在鼠标上淡入,我认为使用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); } 

滚动效果是通过在你的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; } 

这是可能的,使用下面的结构:

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

等等…

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

  • 李获得position: relative;
  • <a>标签一个heightwidth
  • <span> widthheight为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。