Question

我有这样的代码，在这里您可以看到我在图像上添加了叠加层。但是，这种过小的尺寸大于图像的尺寸，即使在填充区域上也是如此。我可以用边距替换该填充，并删除iamge上不必要的覆盖，但是，这会将最后一张图像推送到新行。

.sb-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0a0a0a;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sb-overlay:hover{
    opacity: 0.5;
}
.sb-text{
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}
.s-image img{
width: 100%
}
.grid-item{
padding:5px !important;
}

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
</div>

如何删除该填充区域上的覆盖层，即使覆盖层的大小与图片的大小完全相同。

Answer 1

由于npm install --save tinyduration个定位的元素相对于最近的父元素（具有位置集）定位，因此可以将yarn add tinyduration和absolute添加到您的position: relative元素中。当前，您的叠加层将自身定位到display: block。

a.s-image

.grid-item

使用CALC（）

由于.sb-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: #0a0a0a; z-index: 2; cursor: pointer; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } .sb-overlay:hover { opacity: 0.5; } .sb-text { color: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; } .s-image { display: block; position: relative; } .s-image img { width: 100% } .grid-item { padding: 5px;元素是另一个元素的子元素，因此认为<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> <div class="row"> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> <div class="grid-item col-sm-6 col-md-4"> <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300"> <img title="This is the title" src="https://picsum.photos/600/300" /> <div class="sb-overlay"> <div class="sb-text"> This is the title </div> </div> </a> </div> </div>已包含在元素的宽度/高度中，因此您可以使用absolute设置宽度并调整{{1 }}值。

您正在使用Bootstrap，它会自动在列的左侧和右侧添加padding填充。

calc

top,left,right,bottom

如何删除填充区域上的覆盖物

1 个答案:

使用CALC（）