如何创建一个黑色背景的 div 以适合 div 后面？

Question

我有一个图像，在悬停时我将动画它淡出不透明度：0.4;，淡出淡出为白色，但我喜欢淡入黑色，所以我找到了一个解决方案是改变背景颜色身体变黑。然后我的淡出将朝向黑色。所以我正在尝试做的计划是创建一个黑色背景的 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。所以基本上我希望这个图像后面有一个黑色的 bg，所以当我淡出时它会朝向黑色。任何人都知道我可以实现它的任何简单方法而不是使用 body{background-color:black};?

Answer 1

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

小提琴：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;
}