Question

我制作了一张图像，当它悬停在它上面时会改变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>

Answer 1

您可以尝试以下代码：

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/

Answer 2

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

并使用此代码。

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

为父级使用内联块可以使图像灵活，并且只占用图像所需的区域。

试试这个，它会起作用。

Answer 3

在您的示例中，您错过了关闭“照片缩略图”
当您拥有一个绝对定位的元素时，您没有义务使用“宽度：100％”，“高度：100％”，而是可以使用
<占用所有空间/ LI>

 

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

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

bottom: 10px;

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

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

div仅覆盖整个图像区域

3 个答案: