我正在创建一个带有图像的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/

10-12 00:12
查看更多