Html CSS 在其他包含的元素之上显示 div 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4556656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS show div background image on top of other contained elements
提问by IntricatePixels
Not sure if this is possible and how, but I tried playing around with the z-index of the elements in my code with no success.
不确定这是否可行以及如何实现，但我尝试使用代码中元素的 z-index，但没有成功。
I have a div element that has a background image set in css. inside the div, i have other elements, like div and img. I am trying to have the main div that contains the background image stay on top, since I want that background image to show on top of the other elements (this background image has some rounded corners that I want to show on top of the image included in this div).
我有一个 div 元素，它在 css 中设置了一个背景图像。在 div 中，我还有其他元素，例如 div 和 img。我试图让包含背景图像的主 div 保持在顶部，因为我希望该背景图像显示在其他元素的顶部（此背景图像有一些圆角，我想在包含的图像顶部显示在这个 div 中）。
Example HTML:
示例 HTML：
<div id="mainWrapperDivWithBGImage">
<div id="anotherDiv">
<!-- show this img behind the background image
of the #mainWrapperDivWithBGImage div -->
<img src="myLargeImage.jpg" />
</div>
</div>
Example CSS:
示例 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;
}
回答by JakeParis
I would put an absolutely positioned, z-index: 100;span (or spans) with the background: url("myImageWithRoundedCorners.jpg");set on it insidethe #mainWrapperDivWithBGImage.
我会把绝对定位，z-index: 100;跨度（或跨度）与background: url("myImageWithRoundedCorners.jpg");在其上设置里面的#mainWrapperDivWithBGImage。
回答by Chandu
If you are using the background image for the rounded corners then I would rather increase the padding style of the main div to give enough room for the rounded corners of the background image to be visible.
如果您使用圆角的背景图像，那么我宁愿增加主 div 的填充样式，以便为背景图像的圆角提供足够的空间可见。
Try increasing the padding of the main div style:
尝试增加主 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: I assume the rounded corners have a radius of 10px.
PS：我假设圆角的半径为 10px。
回答by Adam
How about making the <div id="mainWrapperDivWithBGImage">as three divs, where the two outside divs hold the rounded corners images, and the middle div simply has a background-color to match the rounded corner images. Then you could simply place the other elements inside the middle div, or:
如何制作<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;}
Then
然后
HTML:
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>
You may have to do position:relative; and such.
你可能需要做 position:relative; 诸如此类。
