CSS显示div背景图像在其他包含的元素之上 [英] CSS show div background image on top of other contained elements

问题描述

不知道这是否可能和如何，但我试着玩代码中的元素的z-index没有成功。

我有一个div元素，其背景图像设置在css中。里面的div，我有其他元素，像div和img。我试图让包含背景图像的主div保持在顶部，因为我想要的背景图像显示在其他元素的顶部（此背景图像有一些圆角，我想显示在图像的顶部包括

 <$> c $ c>< div id =mainWrapperDivWithBGImage> 
< div id =anotherDiv> 
<！ - 在#mainWrapperDivWithBGImage div  - >后面的背景图片
上显示此img。 
< img src =myLargeImage.jpg/> 
< / div> 
< / div> 
  

示例CSS ：

  / *我如何使这个div的bg图像显示在包含其他元素的顶部
这是可能吗？ * / 
 
 #mainWrapperDivWithBGImage {
 background：url（myImageWithRoundedCorners.jpg）no-repeat scroll 0 0 transparent; 
 height：248px; 
 margin：0; 
 overflow：hidden; 
 padding：3px 0 0 3px; 
 width：996px; 
} 
  

解决方案

background：url（myImageWithRoundedCorners.jpg）; ， z-index：100; >在 中设置 #mainWrapperDivWithBGImage 。

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.

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

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

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

解决方案

I would put an absolutely positioned, z-index: 100; span (or spans) with the background: url("myImageWithRoundedCorners.jpg"); set on it inside the #mainWrapperDivWithBGImage .

这篇关于CSS显示div背景图像在其他包含的元素之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！