Question

我正在寻找一个图像，当我悬停时，另一个图像出现在它上面，但是不透明度较低，允许用户仍然能够在其上方的半透明图像上看到它背后的图像。

  <div id="wrapper"></div>

<style>
    #wrapper {
              width: 250px;
              height: 200px;
              background:url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
}

#wrapper:hover {
              background:url(https://38.media.tumblr.com/tumblr_me1u8vETNC1rfliwho1_500.gif) 0 0 no-repeat;
              opacity: .5;
}

</style>

这当前有效，但我没有在悬停时显示的图像上获得不透明度。

Answer 1

如果您需要在hover上显示两者，可以blend这样：

Fiddle

#wrapper {
    width: 250px;
    height: 200px;
    background:url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
}
#wrapper:hover {
    background:url(https://38.media.tumblr.com/tumblr_me1u8vETNC1rfliwho1_500.gif),url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
    background-blend-mode: multiply;
}

Answer 2

像@nickspiel说的那样，你正在用新的背景图像替换背景图像。在同一个div中有两个图像并在悬停时改变不透明度更有意义。像这样：

<div class="container">
  <img class="back" src="sample.jpg"/>
  <img class="front" src="sample2.jpg"/>
</div>

在html和css中：

.container {
  position: relative;
}
.back, .front {
  width: 400px;
  position: absolute;
}
.front{
  opacity: 0;
}
.container:hover .front {
  opacity: 0.5;
}

Check out the Fiddle here

在图像悬停时，在顶部显示较低不透明度的图像

2 个答案:

Fiddle