Html 如何创建黑色背景的div，使其正好位于div后面？

我有一个图像，悬停时，我将设置动画使其淡出到不透明度：0.4；，淡出是淡出为白色，但我喜欢淡出为黑色，所以我找到了一个解决方案，就是将身体的背景色改为黑色。然后我的淡出将走向黑色。所以我想做的计划是创建一个黑色背景的div，使其宽度和高度与我的img相同，但我不知道怎么做

HTML

---

我的图像的宽度和高度是500乘500。所以基本上我想要一个黑色背景在这张图片后面，所以当我淡出时，它将朝向黑色。。有谁知道我可以用什么简单的方法来代替body{background color:black}

您可以通过为父div提供背景来实现这一点。下面是帮助您的简单代码

小提琴：

CSS:

---

到目前为止，你对自己所做的事情有什么了解吗？这有助于解决问题吗？我使用的是左右边距：10px，有什么方法可以防止我的边距也被背景色填满？

<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>

.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;
}