通过JQuery的CSS方法设置元素的不透明度会移除背景图像

Question

我设置了一个元素的背景图像。当我通过JQuery在悬停时使用CSS方法更改元素的不透明度时，背景图像消失了！这是怎么回事？以下是Codepen上的示例：

CSS

li{
    background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-checkmark-circled-32.png);
    background-repeat: no-repeat;
    background-position: center center;
}

li img{
    z-index:-1;
    position:relative;
}

JQuery

$("li").hover(function(){
    $(this).css("opacity", 0.8);
}
)

http://codepen.io/rimager/pen/LAfJy/

- Rima

---

这段代码在Chrome中也能正常工作。我的问题是，你想让整个li元素的不透明度降低，还是只是让图片变暗？ - BReal14

你是指勾选标记图标消失了吗？还是背景图片消失了？ - Brian

哦，好的观点。应该仔细看一下... - Brian

这与浏览器有关。似乎在改变不透明度时，图像会再次呈现在所有内容的前面。请查看此带有重复背景的演示，您可以看到背景仍然存在：http://jsfiddle.net/a3oqfed4/ 但是不知道为什么会发生这种情况。（OS X 10.9，Safari 7.0.5也会出现） - Ruben R Aparicio

在IE11中正常 - 看起来非常不错。 - TimSPQR

Answer 1

这里是一个使用你的代码稍作修改的工作示例...

http://codepen.io/anon/pen/jsicb1

HTML

<ul>
  <li><img src="https://farm8.staticflickr.com/7014/6741363919_3e0580543e_q.jpg" width="150" height="150" alt="Claude Monet - Bordighera  - 1883"></li>
  <li><img src="https://farm3.staticflickr.com/2366/2555929697_00046ed797_q.jpg" width="150" height="150" alt="Claude Monet - Orchard in Bloom"></li>
  <li><img src="https://farm4.staticflickr.com/3427/3750216840_feefcd6e17_q.jpg" width="150" height="150" alt="Monet, &quot;Impression, Sunrise&quot;"></li>
</ul>  

CSS

li{
  float:left;
  margin:20px;

  opacity: 1;
  position: relative;
}
li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 30px;
  margin-top: -16px;
  margin-left: -16px;
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-checkmark-circled-32.png) no-repeat center center transparent;  

}

li img{
  z-index:-1;
  position:relative;
}

/*
li:hover{
  opacity:0.8;
}
*/

现在，如果您想使用鼠标悬停状态应用相同的不透明度选项，而不使用javascript或jquery，请告诉我，我将在此处发布修改后的源代码。

- Allan

---

谢谢Allan。我可以看到使用::after伪元素如何解决我的问题。不过，我仍然不太明白为什么透明度会移除背景图像。我猜这只是要记住的CSS怪癖之一？ - Rima

如果您想要一个没有使用jQuery或JavaScript的工作示例，请告诉我，这样您就可以仅通过CSS处理不透明度，甚至可以使用过渡效果。 - Allan

Answer 2

这是另一个可行的示例：

HTML

<ul>
  <li id="item1"><img id="img1" src="https://farm8.staticflickr.com/7014/6741363919_3e0580543e_q.jpg" width="150" height="150" alt="Claude Monet - Bordighera  - 1883"></li>
  <li id="item2"><img id="img2" src="https://farm3.staticflickr.com/2366/2555929697_00046ed797_q.jpg" width="150" height="150" alt="Claude Monet - Orchard in Bloom"></li>
  <li id="item3"><img id="img3" src="https://farm4.staticflickr.com/3427/3750216840_feefcd6e17_q.jpg" width="150" height="150" alt="Monet, &quot;Impression, Sunrise&quot;"></li>
</ul>

JS

$("#item1").hover(function(){


 $("#img1").css("opacity", 0.8);
  },
  function(){
  $("#img1").css("opacity", 1);
  }
)
$("#item2").hover(function(){
  $("#img2").css("opacity", 0.8);
  },
  function(){
  $("#img2").css("opacity", 1);
  }
)
$("#item3").hover(function(){
  $("#img3").css("opacity", 0.8);
  },
  function(){
  $("#img3").css("opacity", 1);
  }
)

演示

- Syed Ali Taqi

---

谢谢Syed。这是另一个好的解决方案。不过你知道我为什么一开始会遇到那个问题吗？ - Rima

你曾经设置 li 元素的透明度，但实际上只想让背景图片有此效果。为 li 元素的图片分配一个ID，然后在其上使用 opacity 属性，就像示例代码中一样。 - Syed Ali Taqi