html - 如何创建一个黑色背景的 div 以适应 div 的正后方？

Question

我有一张图片，悬停时我会设置它淡出到不透明度:0.4;，淡出是淡出到白色，但我喜欢淡出到黑色，所以我找到了一个解决方案是改变背景颜色 body 变黑。然后我的淡出将走向黑色。所以我想做的计划是创建一个黑色背景的 div，使其具有与我的 img 相同的宽度和高度，但我不知道该怎么做。

HTML

<div class="container">
        <div class="img_section ">            
            <img class="eight columns test_img" src="images/wpdevshed-portfolio.jpg" alt="logo">
            <h2 class="caption">Jack<br />Portfolio1</h2>
        </div>
</div>

我的图像的宽度和高度是 500 x 500。所以基本上我想要一个黑色背景放在这个图像后面，所以当我淡出时它会变成黑色..任何人都知道我可以实现它的任何简单方法而不是使用 body{background-color:black};?

Answer 1

您可以通过为父 div 提供背景来实现此目的。以下是对您有帮助的简单代码。

fiddle :http://jsfiddle.net/kiranvarthi/ar387hav/

CSS:

.container {
  background: #000;
  position:relative;
  height:500px;
  width:500px;
  margin:0 auto;
}

.container img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.container img:hover {
  opacity:0;
}