如何使用CSS在前景图像上显示背景图像

Question

我想设置背景图像,使其出现在前景图像的前面.

我尝试了以下代码,但它没有按预期工作:

.background-image
  {
      border :0px;
      background-image: url(/images/icon.png);  
      z-index:1000;      
  }
  .foreground-image
  {
      width:200px;
      height:113px;
      border :0px;
      z-index:1;
  }

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="./images/pic1.jpg"  />            
    </a>
</div>

我正在使用CSS2.

Answer 1

这是一种方法.

如果这是您的HTML:

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="http://placekitten.com/200/100"/>  
    </a>
</div>

应用以下CSS规则:

div {
    border: 1px dotted blue;
}
.background-image {
    border: 1px dotted red;
    background-image: url(http://placekitten.com/200/50);
    background-position: center left;
    background-repeat: repeat-x;
    display: block;
    width: 500px;
}
.foreground-image {
    vertical-align: top;
    width: 200px;
    border: 0px;
    position: relative;
    z-index: -1;
}

position: relative在图像上设置并使用,将图像更深入到堆叠顺序中z-index: -1.

请参阅演示:http://jsfiddle.net/audetwebdesign/HUK28/