7

我认为这是不可能的，但我不是 CSS 专家，所以我想我会检查一下。我有一个半透明的 div 绝对定位在图像上。到目前为止这很好，但我想强制我的半透明 div 尊重包含它和图像的框。

<div class="parent">
  <div class="title-bar"> /* prolly not important */
    <h2>Title</h2>
  </div>
  <img src="whatever"/>
  <div class="overlay">
    A few lines of txt
  </div>
</div>

我想得越多，我想我可能要求的越多——我希望父级用 img 扩展，但覆盖层受到父级的约束。这可以做到吗？

4

2 回答 2

9

要强制容器随孩子一起扩展img，请制作它float。
要强制覆盖与容器位置和大小相关，请使容器relative.

.parent {
    float: left;
    position: relative;
}

要强制覆盖尊重容器的边界，请使用百分比。

.overlay {
    position: absolute;
    max-width: 100%;
    /* And then, position it at will */
    top: 0;
    left: 0;
}

我准备了一个例子：http: //jsfiddle.net/rYnVL/

于 2012-09-25T15:32:02.127 回答
1

这是 可行的，但不是很漂亮：

<div id="parent">
    <div id="abs">stuff fadsfasd fsad fasdsdaf </div>
    <img src="/img/logo.png" />
</div>

#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}

#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}

需要注意的要点：
parent浮动没有 100% 的宽度。位置是相对的。
abs是绝对的，大小为 100%。

此外，如果abs内容大于图像，它会溢出。如果您不喜欢这样，只需添加overflow:hidden.

于 2012-09-25T15:33:08.487 回答