悬停时覆盖透明图像

Question

我有一个 <div> 和一个 background-image。当它悬停在上面时，我希望将另一张图像放在部分透明的顶部，以便可以在下面看到原始图像。

我目前的想法是添加一个 :hover 状态并将上面的图像 display 状态更改为 visible 以及必要的 z-index 值。

有人可以给我一个 jsfiddle.net 实施的例子吗？

Answer 1

为什么不使用 opacity？

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

.myTransparentImage{
   opacity: 0;
}

.myTransparentImage:hover{
   opacity: 0.6; /* it's in pourcentage */
}

这样，悬停时透明图像将显示为 60% opacity，因此您仍然可以看到下面的图像。所以它一直在另一个图像之上，但只在悬停时出现。

下面是 fiddle 中的示例：https://jsfiddle.net/5ob6n7nq/

Answer 2

为您制作了一个简单的示例。点击 "Run code snippet" 查看实际效果。

.image-holder {
  background: url('http://i.imgur.com/5ln9Vmi.jpg');
  height: 500px;
  width: 500px;
  position: relative;
}

.image-holder::before {
  content: '';
  background: url('http://i.imgur.com/khYHDfJ.jpg');
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.image-holder:hover::before {
  opacity: .5; /* amount of opacity to blend the two images */
}

<div class="image-holder">
</div>

Answer 3

如果我理解正确的话：https://jsfiddle.net/3jabz7d3/

<div class="block1">
  <div class="block2"></div>
</div>


.block1 {
  position: relative;
  width: 200px;
  height: 200px;
  background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg)  no-repeat center center;
  background-size: cover;
}

.block2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg)  no-repeat center center;
  background-size: cover;
  display: none;
  opacity: 0.3;
}

.block1:hover .block2{
  display: block;
}

悬停时覆盖透明图像

Overlay transparent image on hover

html

css

opacity