Question

我在这里苦苦挣扎，因为我的div与图像没有重叠。当您悬停此div（不透明度为0）时，它会在转换后获得不透明度。

问题是，div在图像下方，而它应该覆盖图像（悬停在图像下方某处以查看问题）（JSFiddle）：

＆＃13;

.column {
  height: 300px;
  width: 300px;
  position: relative;
}

.overlay {
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.overlay {
    opacity: 0;       
    transition: opacity .25s linear; /* vendorless fallback */
    -o-transition: opacity .25s linear; /* opera */
    -ms-transition: opacity .25s linear; /* IE 10 */
    -moz-transition: opacity .25s linear; /* Firefox */
    -webkit-transition: opacity .25s linear; /*safari and chrome */
}

.overlay:hover {
    opacity: .75;
}

＆＃13;

<div class="column">
  <img src="http://cdn.welingelichtekringen.nl/wp-content/uploads/2014/10/hond-584x340.jpg">
  <div class="overlay">
    <p>
      I'm some test text!
    </p>
  </div>
</div>

＆＃13;

有人可以帮我确保叠加层覆盖图像吗？

Answer 1

将css overlay类修改为：

.overlay {
 background: #ddd;
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 left:0;
 top:0; 
}

https://jsfiddle.net/djsreeraj/b0r25gbd/3/

Answer 2

您必须使用属性Type* a; Type b; a->method(); // same as (*a).method(); b.method();和position:absolute设置top:0。您可以使用以下解决方案：

＆＃13;

left:0

＆＃13;

.column {
  height: 300px;
  width: 300px;
  position: relative;
}
.overlay {
  background: #ddd;
  position: absolute;
  opacity: 0;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.overlay {
  opacity: 0;       
  transition: opacity .25s linear; /* vendorless fallback */
  -o-transition: opacity .25s linear; /* opera */
  -ms-transition: opacity .25s linear; /* IE 10 */
  -moz-transition: opacity .25s linear; /* Firefox */
  -webkit-transition: opacity .25s linear; /*safari and chrome */
}
.overlay:hover {
  opacity: .75;
}

＆＃13;

Answer 3

您可以使用上面提到的position：absolute方法。此外，如果您想相应地更改图像的大小以使其缩小，请使用max-width属性。例如：

.column {
  max-height: 300px;
  max-width: 300px;
  position: relative;
}

.column img {
 max-height: 300px;
 max-width: 100%;
}

.overlay {
  background: #ddd;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

.overlay {
  height: 100%;
  width: 100%;
    opacity: 0;       
    transition: opacity .25s linear; /* vendorless fallback */
    -o-transition: opacity .25s linear; /* opera */
    -ms-transition: opacity .25s linear; /* IE 10 */
    -moz-transition: opacity .25s linear; /* Firefox */
    -webkit-transition: opacity .25s linear; /*safari and chrome */
}

.overlay:hover {
    opacity: .75;
}

<div class="column">
  <img src="http://cdn.welingelichtekringen.nl/wp-content/uploads/2014/10/hond-584x340.jpg">
  <div class="overlay">
    <p>
      I'm some test text!
    </p>
  </div>
</div>

Answer 4

虽然你的问题的某些部分已经被其他人（并且正确地）回答，但我觉得他们缺乏必要的解释，其中一些也只是部分地解决了这个问题。

首先，了解叠加层最初位于元素下方而不是图像上方（尽管它有position: absolute）的原因如下：

该元素已分配width和height，但未指定left / right或top / bottom。如果没有为这些值指定值，则为它们设置默认值（auto）。然后，UA会在渲染过程中将auto解析为实际值。
根据height时auto不是100%（此处为top），bottom和{{1} } auto，然后将top设置为静态位置。静态位置表示元素在没有设置任何position值时在页面上的位置。这里，元素是div，因此它默认位于img（下一行）下方。这就是为什么我们在图像下方看到它而不在它上面。

'top'和'bottom'是'auto'，'height'不是'auto'， 然后将'top'设置为静态位置 ，设置' 'margin-top'和'margin-bottom'的auto'值为0，并解决'bottom'
类似的逻辑适用于left，right和width。

当我们提供top: 0px;和left: 0px时，我们明确指示UA将元素放置在父元素的左上角，因此它现在可以正确覆盖图像。

其次，即使我们这样做，我们也会看到叠加层实际上并不覆盖图像，因为虽然容器是300px x 300px，但图像的尺寸不受限制，因此它将显示完整的图像而叠加层element是100％x 100％的父级（因此只有300ps x 300px）。

有三种方法可以解决这个问题。一种是使用现有答案之一中详述的max-height和/或max-width方法，但缺点是它会缩小图像，同时保留其纵横比（因此不会是300px x 300像素）。第二个选项是将img维度显式设置为300px x 300px（与父级相同），但这样可以在不保留纵横比的情况下调整图像大小。

第三个选项（我建议使用）是使用object-fit: cover上的img。使用它可以使图像按比例缩放，使其纵横比保持不变，并且与父图像的尺寸相同（底部和右侧的额外部分将被剪裁）。使用此方法的唯一缺点是缺少IE支持。在IE中，图像仍会显示，但不会保持纵横比。

.column {
  position: relative;
  height: 300px;
  width: 300px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.overlay {
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0px;
  left: 0px;
}
.overlay {
  opacity: 0;
  transition: opacity .25s linear;  /* vendorless fallback */
  -o-transition: opacity .25s linear;  /* opera */
  -ms-transition: opacity .25s linear;  /* IE 10 */
  -moz-transition: opacity .25s linear;  /* Firefox */
  -webkit-transition: opacity .25s linear;  /*safari and chrome */
}
.overlay:hover {
  opacity: .75;
}

<div class="column">
  <img src="http://cdn.welingelichtekringen.nl/wp-content/uploads/2014/10/hond-584x340.jpg">
  <div class="overlay">
    <p>
      I'm some test text!
    </p>
  </div>
</div>

以下部分与原始问题严格无关。这是我们在聊天中讨论的一个跟进，但为了保持连续性，我在这里添加它。

如果容器元素具有padding或margin，例如Visual Rendering Specs by W3C，那么叠加层仍然不会完全覆盖img。这是因为here。因此，图像不会出现在容器的填充区域中，而叠加将存在，因为它占据了父级尺寸的100％。克服这一点需要一个简单的技巧。将叠加元素的大小减少两边的padding，并将left设置为等padding-left https://www.google.com/maps/search/hotel/@41.959816,12.802226。

Answer 5

在overlay课程中，添加：

top:0;
left:0;

Div不与图像

5 个答案: