CSS在其他包含的元素之上显示div背景图像[重复]

Question

不确定这是否可行以及如何实现，但我尝试在我的代码中使用元素的 z-index，但没有成功。

我有一个 div 元素，它在 css 中设置了背景图像。在 div 内部，我还有其他元素，例如 div 和 img。我试图让包含背景图像的主 div 保持在顶部，因为我希望该背景图像显示在其他元素的顶部（此背景图像有一些圆角，我想在包含的图像顶部显示在这个 div 中）。

示例 HTML：

<div id="mainWrapperDivWithBGImage">
   <div id="anotherDiv">
      <!-- show this img behind the background image 
      of the #mainWrapperDivWithBGImage div -->
      <img src="myLargeImage.jpg" />
   </div>
</div>

示例 CSS：

/* How can I make the bg image of this div show on top of other elements contained
   Is this even possible? */

#mainWrapperDivWithBGImage {
  background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent;
  height: 248px;
  margin: 0;
  overflow: hidden;
  padding: 3px 0 0 3px;
  width: 996px;
}

Answer 1

我会放置一个绝对定位的z-index: 100; 跨度（或多个跨度），并在其上设置background: url("myImageWithRoundedCorners.jpg");在#mainWrapperDivWithBGImage。

Answer 2

如果您使用圆角的背景图像，那么我宁愿增加主 div 的填充样式，以便为背景图像的圆角提供足够的空间。

尝试增加主 div 样式的内边距：

#mainWrapperDivWithBGImage 
{   
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent;   
    height: 248px;   
    margin: 0;   
    overflow: hidden;   
    padding: 10px 10px;   
    width: 996px; 
}

P.S：我假设圆角的半径为 10 像素。

Answer 3

如何将<div id="mainWrapperDivWithBGImage"> 设为三个 div，其中两个外部 div 保存圆角图像，而中间 div 仅具有与圆角图像匹配的背景颜色。然后你可以简单地将其他元素放在中间 div 中，或者：

#outside_left{width:10px; float:left;}
#outside_right{width:10px; float:right;}
#middle{background-color:#color of rnd_crnrs_foo.gif; float:left;}

然后

HTML：

<div id="mainWrapperDivWithBGImage">
  <div id="outside_left><img src="rnd_crnrs_left.gif" /></div>
  <div id="middle">
    <div id="another_div"><img src="foo.gif" /></div>
  <div id="outside_right><img src="rnd_crnrs_right.gif" /></div>
</div>

你可能需要做 position:relative;等等。