html – CSS显示div背景图像顶部其他包含的元素

前端之家收集整理的这篇文章主要介绍了html – CSS显示div背景图像顶部其他包含的元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > CSS background image on top of <img>
不知道如果这是可能的,怎么样,但是我试着用我的代码中的元素的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;
}

解决方法

我会把一个绝对定位,z指数:100;具有背景的跨度(或跨度):url(“myImageWithRoundedCorners.jpg”);在#mainWrapperDivWithBGImage中设置它。

猜你在找的HTML相关文章