html - 如何去除填充区域上的覆盖

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>

我怎样才能在填充区域上删除这个覆盖，即，使覆盖的图像大小精确。

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

由于absolute定位元素将自己定位在具有位置集的最近的父元素上，因此您可以将position: relative和添加display: block到您的a.s-image元素。当前，您的叠加层将自身定位到.grid-item.

.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另一个元素的子元素的定位元素被认为padding包含在元素的宽度/高度中，因此您可以使用它calc来设置宽度并调整您的top,left,right,bottom值。

您正在处理 Bootstrap，它会自动将15px填充添加到列的左侧和右侧。

.sb-overlay{
    position: absolute;
    width: calc(100%-30px);
    height: calc(100%-10px);
    top: 5px;
    left: 15px;
    right: 15px;
    bottom: 5px;
    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;

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