文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何删除填充区域上的覆盖

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

Stack Overflow用户
提问于 2020-10-15 21:26:31
回答 1查看 122关注 0票数 0

我有一个这样的代码，在这里你可以看到我已经在图像上添加了覆盖。然而，这种超低尺寸比图像的尺寸大，它甚至在填充区域上也显示重叠。我可以用空白处替换这个填充，并删除覆盖在图像上的不必要的覆盖，但是，这会将最后一个图像推到新行。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

我如何删除这个覆盖在填充区域上的覆盖，即，使覆盖图像的确切大小。

html
css
twitter-bootstrap
bootstrap-4
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-15 21:33:05

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

​

代码语言：javascript
复制
.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;
代码语言：javascript
复制
<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>

​

使用CALC()

由于作为另一个元素的子元素的absolute定位元素将padding视为包含在元素的宽度/高度中，因此可以使用calc设置宽度并调整top,left,right,bottom值。

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

​

代码语言：javascript
复制
.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;
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64372612

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档