我正在创建一个带有图像的div,并将overlay放在上面。当你将鼠标悬停在图像上时,覆盖将出现,但它不使用填充
<div class="col-lg-6 text-center full-width">
<div class="overlay">
<p class="overlay-price-product">
$9.00
</p>
<p class="color-white">
MENS,T-SHIRT
</p>
<p>
<a href="#">
<button type="button" class="btn btn-default-buy">
add to cart
</button>
</a>
</p>
</div>
<img src="img/men_shirt_1.jpg" class="spaces">
</div>
我的CSS
.full-width{
padding-right: 0px !important;
padding-left: 0px !important;
background-color: #F6F6F6;
}
现在的问题是它为图像类使用填充,而不是为覆盖类使用填充
.overlay{
opacity: 0;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
padding: 20px;
}
.spaces{
padding:20px;
}
我不想把我的套印图改成图片的大小,有什么建议吗?或者有什么有效的方法?
最佳答案
默认情况下,背景应用于内部空间,包括填充。
如果不需要,可以使用“背景剪辑”属性进行更改。对你来说,
.overlay {
background-clip: content-box;
}
fiddle
关于html - 填充无法在叠加层上使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28913109/