Question

我正在创建一个带有图像的div并将叠加层放在顶部。当您将鼠标悬停在图像上时，将显示叠加层，但它没有采用填充

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

我想我的叠加层是图像的确切大小吗？或任何有效的方式吗？

Answer 1

还有另一种方式。我会举一个例子。这将是三种缩放效果。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Powerful Zooming Effect Using jQuery  </title>

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script> 

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $('#image1').addimagezoom({
            zoomrange: [3, 10],
            magnifiersize: [300, 300],
            magnifierpos: 'right',
            cursorshade: true,
            largeimage: 'Image/image1.jpg' //<-- No comma after last option!
        })

        $('#image2').addimagezoom({
            zoomrange: [5, 5],
            magnifiersize: [400, 400],
            magnifierpos: 'right',
            cursorshade: true,
            cursorshadecolor: 'pink',
            cursorshadeopacity: 0.3,
            cursorshadeborder: '1px solid red',
            largeimage: 'Image/image2.jpg' //<-- No comma after last option!
        })

        $('#image3').addimagezoom()

    })

</script>
<style type="text/css">
    .magnifyarea
    {
        box-shadow: 5px 5px 7px #818181;
        -webkit-box-shadow: 5px 5px 7px #818181;
        -moz-box-shadow: 5px 5px 7px #818181;
        filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
        background: white;
    }
</style>



</head>
<body>
<form id="form1" runat="server">
<p>
    <img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
        <p>
            <img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
                <p>
                    <img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
</form>
</body>
</html>

Answer 2

您可以使用以下代码：以下是Live Demo

<div class="container">
     <img src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" width="200"/>
     <div class="overlay">
         <p class="overlay-price-product"> $9.00 </p>
         <p class="color-white"> MENS,T-SHIRT  </p>
         <p><button type="button">add to cart</button></p>     
     </div> 
</div>


.container{
    width:200px;
    height:200px;
    background:green;
    position:relative;
}
.container img{
    width:100%;
    height:100%;
}
.overlay{
    width:100%;
    height:100%;
    background:red;
    opacity:0;
    position:absolute;
    text-align:center;
    box-sizing:border-box;
    padding:20px;
    top:0;
    transition:all .5s;
    transform:scale(.9, .9);
}
.overlay:hover{
    opacity:1;
    transform:scale(1, 1)
}

Answer 3

Add this css in overlay class

.overlay{
   box-sizing: border-box;
}

Answer 4

默认情况下，背景适用于内部空间，包括填充。

如果您不想这样，可以使用background-clip属性进行更改。在你的情况下，

.overlay {
    background-clip: content-box;
}

fiddle

Answer 5

我试图重现你的代码。正如您所看到的那样，填充在叠加层上起作用。

你能检查一下overlay类中的一个段落标签是否有一些填充或边距？

其他选项是其他一些css代码会覆盖其他地方的覆盖容器。您应该使用浏览器检查器进行检查。

＆＃13;

.container {
    background:green;
}

.overlay {
    position: absolute;
    width:150px;
    height:150px;
    padding: 20px;
    background:red;
}

.overlay:hover {
     opacity:.5;      
}

.spaces {
    width:150px;
    height:150px;
    padding:20px;
}

＆＃13;

<div class="container">
    <div class="overlay">
        <p>I'm overlay</p>
        <p class="overlay-price-product">
          $9.00
        </p>
    </div>
    <img class="spaces" src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" />    
</div>

＆＃13;

填充不能覆盖

5 个答案: