1

在图像hover上，我想在其上显示一个不同的小图像，background以便opacity原始图像仍然可见。我想用transition来减慢悬停效果。所以这就是我正在尝试但没有工作的内容：

HTML：

<img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" />

CSS：

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

.test:hover {
    opacity: 0.5;   
}

JS 小提琴：http: //jsfiddle.net/AXQW4/2/

有人可以帮我吗？

4

4 回答 4

3

为此，您需要一个额外的包装器。正是图像的大小，并给出背景。然后，当您将鼠标悬停在图像上时，将其隐藏并显示底层背景。

活生生的例子

HTML

<div class="background">
    <img src="http://i50.tinypic.com/2poy3kl.jpg">
</div>

CSS

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}
.background {
    background: url("http://i50.tinypic.com/10mue4k.png");
    display: inline-block;
    font-size: 0;
}
.background img {
    -webkit-transition: all .5s;
}
.background img:hover {
    opacity: 0.5;
}

无需知道图像的确切尺寸。

于 2012-09-26T11:03:02.177 回答
3

这是你要找的东西吗：http: //jsfiddle.net/AXQW4/3/

于 2012-09-26T11:05:02.117 回答
2

还有一个演示:)

http://jsfiddle.net/AXQW4/7/

于 2012-09-26T11:17:44.423 回答
1

这是你想要的 演示 还是这个链接

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");

 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.test:hover {
  opacity:.5;
}
于 2012-09-26T11:05:45.733 回答