Html CSS在其他包含的元素上显示div背景图像

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

我有一个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>

/* 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;
}

---

我会把一个绝对定位，

z-index:100

span（或span）和

背景：url（“myImageWithRoundedCorners.jpg”）

设置在

#main wrapperdivwithbgimage

的内部，如果您将背景图像用于圆角，那么我宁愿增加主div的填充样式，以便为背景图像的圆角留出足够的可见空间

尝试增加主div样式的填充：

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

---

附言：我假设圆角半径为10px。

将

设置为三个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的背景图像显示在顶部，它将隐藏其下方的内部元素，子元素将无效。你确定吗？这是一个很好的观点！我想这是行不通的，至少我是这样嵌套的…@Cyber听起来背景图像并没有占据背景div的全部填充。只是一小部分而已。@用户如果这样做，请确保将包装div设置为`position:relative`是的，这起作用了。。。但是我必须把背景图像做成一个透明的png，这样里面的内容才能显示出来。谢谢@user55声明'background:transparent'（背景：透明）比使背景成为透明图像要好。这样，浏览器就少了一个要下载的项目。@JMC Creative实际上背景透明在我的情况下不起作用，因为我有一个带有圆角的3px边框的框架PNG。然后，内容显示在PNGs透明区域内。然而，我遇到的一个新问题是，现在我在div中的a链接不可点击，因为我在#mainWrapperDivWithBGImage中放置的绝对位置范围现在位于其他所有内容之上，因此链接不起作用。我将a链接z索引改为显示在顶部，但随后a链接内的图像显示在跨度顶部，并带有透明的PNG@taulant有件事我不明白（而且@Cybernate已经提到了这一点）：为什么你希望背景图像出现在链接前面？听起来你需要仔细考虑一下你希望这个分层。把图片放在链接上面，然后抱怨你不能点击链接，这是没有意义的（至少在没有看到你的项目的情况下）？你有没有可以分享的链接，可以在上下文中看到整个事情？

<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>