我有一张图片,悬停时我会设置它淡出到不透明度: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};?
最佳答案
您可以通过为父 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;
}
关于html - 如何创建一个黑色背景的 div 以适应 div 的正后方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26727362/