主页 / 问题 / 615880
Accepted
Rumata
Asked:2020-01-17 21:53:21 +0000 UTC2020-01-17 21:53:21 +0000 UTC

为什么图像超出链接区域

  • 772

我正在制作相册，我注意到一个有趣的效果：<div>背景图片在链接内部<a>，但它却在链接之外。将鼠标悬停在图像上可以看到这一点。

深入研究样式后，我意识到它在 中Bootstrap，但我还没有找到确切的内容。我将不胜感激。
提前致谢。

示例代码位于JSFiddle - https://jsfiddle.net/o7y4m1ut/那里一切正常。这里连接Bootstrap后的代码片段显示不正确。不明白为什么...

.ImgContainer {
  min-width: 100px;
  min-height: 150px;
  margin: 5px;
}

@media (min-width : 1200px) {
  .ImgContainer {
      margin: 0;
  }
}

.imgOne {
  background-image: url(http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg);
  background-position: center;
  background-size: cover;
}

.gallery {
  display: block;
  /* border: dashed red 3px; */
  position: relative;
}

.gallery:hover {
  background-color: #555;
  text-decoration: none;
  color: white;
}

.myCol {
  min-height: 180px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="secionSecond">
<div class="container">
  <div class="row">

    <section class="col-md-4   col-lg-6  col-xs-12 col-sm-6 myCol firstCol">
      <a class="gallery gallerySix" href="#">
      <div class="row">
        <div class="col-lg-5 ImgContainer imgOne">

          <!-- <img src="img/summer-1.jpg" alt="There should be an image!"> -->
        </div>
        <div class="col-lg-7"><h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae sagittis ex.</p>
        </div>
      </div>
    </a>
    </section>

html

1 个回答

  1. Best Answer

    尝试overflow: hidden;在 CSS 中添加.gallery{}

    • 2

相关问题