懸停時疊加透明圖像

Question

我有一個帶有background-image的<div> 。 當將鼠標懸停在上面時，我希望將另一幅圖像放置在部分透明的頂部，以便可以在下面看到原始圖像。

我當前的想法涉及添加:hover狀態並將上述圖像display狀態與必要的z-index值一起更改為visible 。

有人可以給我一個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;
}