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

- IntricatePixels

---

如果主div的背景图像显示在顶部，它将隐藏其下面的内部元素，子元素也将无用。你确定吗？ - Chandu

这是一个很好的观点！我猜这样做不会起作用，至少不是按照我现在的嵌套方式... - IntricatePixels

@Cyber 看起来背景图片没有填满整个背景 div。只有一小部分。 - JakeParis

Answer 1

我会在 #mainWrapperDivWithBGImage 的内部放置一个具有绝对定位和 z-index: 100; 样式的 span 元素（或多个 span 元素），并将 background: url("myImageWithRoundedCorners.jpg"); 样式设置在其中，以此实现圆角图像背景。请注意保留原文中的 HTML 标签。

- JakeParis

---

@user 如果你这样做，请确保将包装器div设置为 position: relative;。 - JakeParis

@taulant 有一件我不明白的事情（@Cybernate已经提到了）：为什么你想让背景图片在链接的前面？听起来你需要考虑一下如何分层。如果把一个图像放在链接上方，然后抱怨无法单击链接，这是没有意义的（至少没有看到你的项目）。你有一个链接可以分享，以便查看整个上下文吗？ - JakeParis

@taulant：你将所有4个角的图像放在一个span中，但希望这个大span的中心是隐形的吗？这不是最好的解决方案。我建议您为每个角创建4个单独的spans。 - JakeParis

谢谢...我认为这正是我正在做的，这就是为什么我遇到问题的原因（在顶部使用背景图像，然后链接无法工作）。我将改变整个设置。不幸的是，该项目尚未上线，而且位于安全区域，所以我现在无法分享它。您是说我应该为每个角创建一个span，并绝对定位所有四个吗？ - IntricatePixels

有人可以提供代码吗？“set on it”是什么意思？ - Pratik Poddar

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

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

- Chandu

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;等属性。

- Adam

---

这篇文章提供了一个解决方案，当上述选项无法工作时，它对我很有用... https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html - Isaac Tait