悬停时图像叠加？

Question

我正试图在悬停图像时创建经典的“黑色”叠加层。出于某种原因，我的是白色的。谁能向我解释我做错了什么？这是我的jsFiddle。

anything(input: UIAlertAction)

Answer 1

您的background-color属性永远不会被看到，因为图像本身占据了元素的整个空间。将其包裹在<div>（或类似）中：

＆＃13;

＆＃13;

.img-fade {
    background-color: #202020;
    float:left;
}
.img-fade img {
     display: block;
  
     -webkit-transition: opacity 1s linear;
        -moz-transition: opacity 1s linear;
         -ms-transition: opacity 1s linear;
          -o-transition: opacity 1s linear;
             transition: opacity 1s linear;
}

.img-fade img:hover {
    opacity:0.5;
}

＆＃13;

<div class="img-fade">
  <img src="http://placehold.it/200x200" />  
</div>

＆＃13;

＆＃13;

＆＃13;