8

有没有办法可以做到以下几点？

我有一个透明的 png 精灵，左侧显示标准图片，右侧显示 :hover 状态的图片。

有没有一种方法可以让图像在 :hover 上仅使用 css3 转换从左图像淡入右图像？我尝试了以下方法，但它不起作用：

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

现在，上面确实为背景设置了动画，它平移了图像。我想要代替平底锅的是淡入淡出或溶解效果。

更新：我最终不得不创建两个元素并分别为不透明度设置动画。这有点混乱，因为我必须指定每个元素的确切边距，但我想它会起作用。感谢大家的帮助:)

4

8 回答 8

4

关于这个话题的最新消息：

Chrome 19 及更高版本支持背景图像过渡：

演示： http ://dabblet.com/gist/1991345

附加信息： http: //oli.jp/2010/css-animatable-properties/

于 2012-07-14T08:22:22.193 回答
3

You haven't specified any code to do the actual transition.

http://css3.bradshawenterprises.com/cfimg1/

Try this out in your hover style:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;
于 2011-08-04T21:55:00.163 回答
1

看看这个：http: //jsfiddle.net/j5brM/1/

我认为这适合您的所有需求，并且不那么复杂。

于 2011-08-04T22:16:03.053 回答
1

我认为您不能仅更改 CSS 中背景图像的不透明度，因此除非您有两个单独的背景图像元素（一个用于精灵的每个位置）并在悬停时更改它们的不透明度，我认为你被困住了。

于 2011-08-04T22:22:12.113 回答
0

我知道这可能有点晚了。但我很长一段时间都在同一个问题上苦苦挣扎。同样对于透明精灵，许多解决方案似乎都不起作用。

我做的是这个

HTML

<div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}

这是一种纯粹的 css 方式并且有很多编码.. 但似乎是我达到预期效果的唯一方法！希望同样偶然发现此问题的人可以从中获得一些帮助！

于 2014-10-15T12:48:30.707 回答
0 
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

应该

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

不确定这是否可以解决。

于 2011-08-04T21:48:11.737 回答
0 
<li class="image transition"></li>

css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}

/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}

.image:hover{
background-image: url("some/file/path_hoverImage.png");
}
于 2015-06-24T19:59:02.940 回答
-1

CSS：-

li { 背景： url( http://oakdale.squaresystem.co.uk/images/solutions.png ) 不重复左中心；背景尺寸：89px；填充：54px 0 54px 130px；webkit-transition:all 0.5s 线性；-moz-transition：所有 0.5s 线性；-o-transition：所有0.5s线性；过渡：全0.5s线性；}

li:hover { 背景尺寸：50px }

于 2017-03-10T07:46:36.053 回答