首页 文章

div仅覆盖整个图像区域

提问于
浏览 次
0

我制作了一个图像，当它悬停在它上面时会改变div的不透明度 . div应与图像大小相同 . 我已设法将div放在图像的顶部 . 但是，当我将宽度和高度设置为100％时，div覆盖图像包含图像的边距 . 我想知道如何修复它，以便div只能覆盖不包含边距的图像 . 请注意，我需要图像响应，所以我不想尽可能多地以像素为单位设置高度 .

这是小提琴：https://jsfiddle.net/gsuxlzt/77vn1uyg/

这是代码：

.margin {
  margin-bottom: 10px;
}
.photo-thumbnail {
  position: relative;
}
.photo-title {
  width: 100%;
  height: 100%;
  background-color: #cbe1f4;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  color: #18121e;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.photo-title:hover {
  opacity: .9;
}

<div class="photo-thumbnail">
  <img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
  <a href=#>
    <div class="photo-title">
      <h2 style="padding: 20% 0 20% 0;">Project Title</h2>
    </div>
  </a>
</div>
css css3

3 回答

  • 0

    你可以试试这段代码：

    Html代码：

    <div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
        <div class="photo-title">
          <h2 style="padding: 20% 0 20% 0;">Project Title</h2>
        </div>
          </a>

    CSS代码： -

    .margin {
  margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
  position: relative;
}

.photo-title {
  width: 100%;
  height: 100%;
  background-color: #cbe1f4;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  color: #18121e;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s linear;
}

.photo-title:hover {
  opacity: .9;
}

    https://jsfiddle.net/Dhavalr/77vn1uyg/8/

    回复于
  • 1

    首先，不要使用 <img> 的填充和边距而是将其用于 .photo-thumbnail

    并使用此代码 .

    .photo-thumbnail {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

    对父母使用内联块可以使图像灵活，并且只占用图像所需的区域 .

    试试这个，它会起作用 .

    回复于
  • 0

    • 在您的示例中，您错过了“照片缩略图”的关闭

    • 当你有一个绝对定位的元素时，你没有义务使用“宽度：100％”，“高度：100％”，相反，你可以让它占用所有的空间

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    在你的情况下，你可以设置

    bottom: 10px;

    因为这就是你的div从画面中消失了多少

    这是一个小提琴的例子：https://jsfiddle.net/77vn1uyg/3/

    回复于

相关问题