Question

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

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

有人能给我一个jsfiddle.net实现的例子吗？

Answer 1

为什么不使用opacity？

不透明度CSS属性指定元素的透明度，即元素背后的背景重叠的程度。

该值适用于整个元素，包括其内容，   即使该值不是由子元素继承的。因此，一个   元素及其包含的子元素都具有相同的不透明度   到元素的背景，即使元素及其子元素   不同的不透明度相互之间。

.myTransparentImage{
   opacity: 0;
}

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

这样，悬停时的透明图片将显示为60％opacity，因此您仍然可以看到下面的图片。因此，它始终位于另一个图像的顶部，但只会出现一次。

以下是小提琴中的一个例子：https://jsfiddle.net/5ob6n7nq/

Answer 2

为你准备了一个快速的例子。点击“运行代码段”以查看它的实际效果。

.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;
}

悬停时叠加透明图像

3 个答案: