Question

解决

我正在使用Bootstrap使用图像和文本以及稍微不透明的径向渐变悬停来进行页面导航。我遇到的问题是悬停比它所放置的图像略宽，所以我在悬停时在图像的左侧和右侧得到细灰色条。我在全屏时设法让它看起来不错，但如果我调整页面大小，它会再次出现。

这是html：

<div class="row">
  <div class="col-xs-4 subnav" id="subnav1">
    <a href="#bands">
      <img src="_images/_thumbnails/niki_01_t.jpg" />
      <div id="subnav-overlay1" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text1">BANDS</h3>
      </div>
    </a>
  </div>
  <div class="col-xs-4 subnav" id="subnav2">
    <a href="#portraits">
      <img id="subnav-image2" src="_images/_thumbnails/terence_03_t.jpg" />
      <div id="subnav-overlay2" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text2">PORTRAITS</h3>
      </div>
    </a>
  </div>
  <div class="col-xs-4 subnav" id="subnav3">
    <a href="#products">
      <img src="_images/_thumbnails/bp_2_t.jpg" />
      <div id="subnav-overlay3" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text3">PRODUCTS</h3>
      </div
    </a>
  </div>
</div>

CSS：

.subnav {
    display: block;
    position: relative;
    overflow: hidden;
}
.subnav img {
    width:100%; 
    height:100%;
    overflow:hidden;
}
.subnav a {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}
.subnav h3 {
  display: none;
  font-size: 2em;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
}
.subnav-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow: hidden;
    background:rgba(0, 0, 0, 0.5);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    display:none;
    padding-right: -15px;
    padding-left: -15px;
}

Here's a screenshot

Answer 1

将position:relative添加到您的<a>

.subnav a {
    position:relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

原因是 - 覆盖层的绝对定位不会粘附在相对定位的Bootstrap列的填充上，后者带有额外的15px填充。通过添加相对于限制在填充中的<a>的位置，您可以将绝对叠加保持在<a>

的大小范围内

Codepen

请注意，上面我将列类更改为col-md-4，但这与您无关。

引导约束div中包含的宽度div

1 个答案: