8

我正在寻找将标题叠加到图像上。我已经设法做到了，但是图像正在从 parent 扩展出来div。

我将包含div设置为inline-block，因为我希望它“自动调整大小”，而不是占用width: 100%. 如果查看当前输出，您会看到图像可能位于黑色边框框内。

如果您遇到跨浏览器问题，它只需要在 Chrome 中工作。

提前致谢！

现场演示

CSS：

#body_content {
    border: solid 1px blue;
    display: inline-block;    
    padding: 5px;
}
#body_header {
    border: solid 1px red;
    font-size: 25px;
    padding: 5px;
}
#body_image {
    position: absolute;
}
#body_image_caption {
    color: white;
    line-height: 30px;
    margin-left: 10px;
}
#body_image_container {
    background: white;
    border: solid 1px black;
    margin-top: 3px;
    padding: 10px;
}
#body_image_overlay {
    background-color: black;
    bottom: 5px;
    display: block;
    height: 30px;
    opacity: 0.85;
    position: absolute;
    width: 100%;    
}​

HTML：

<div id="body_content">
   <div id="body_header">
      Heading
   </div>
   <div id="body_image_container">
      <div id="body_image">
          <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
          <div id="body_image_overlay">
             <div id="body_image_caption">
                Some Text
             </div>
          </div>
      </div>
   </div>
</div>
4

3 回答 3

20

该#body_image元素正在从 中转义，#body_image_container因为它position被设置为absolute。绝对定位的元素会从文档流中移除，导致父元素折叠，就好像子元素不存在一样。如果将其更改为relative，则它将包含在黑盒子中：

#body_image{
    position: relative;
}

http://jsfiddle.net/AaXTm/2/

于 2012-12-23T16:57:28.153 回答
8

在父 div 中尝试这个 css。

Overflow:auto
于 2013-10-08T19:16:47.450 回答
2

检查这个小提琴。您需要将图像的子元素的位置设置为绝对位置，将父元素的位置设置为相对位置。相应地更改标题的宽度。

child-element {
    position:absolute;
}

parent-element {
    position:relative
}

http://jsfiddle.net/AaXTm/4/

于 2012-12-23T18:52:56.310 回答