不确定这是否可行以及如何实现,但我尝试使用代码中元素的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;
}
答案 0 :(得分:19)
我会在z-index: 100;
{<1}}内放置background: url("myImageWithRoundedCorners.jpg");
跨度(或跨度)#mainWrapperDivWithBGImage
设置
答案 1 :(得分:0)
如果您使用背景图像作为圆角,那么我宁愿增加主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:我认为圆角的半径为10px。
答案 2 :(得分:0)
如何将<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>
你可能必须做位置:亲戚;等等。