css - 如何使用 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/

Answer 2

通过删除前景图像。

.background-image {
  border :0;
  background-image: url(/images/icon.png);
  width:200px;
  height:113px;   
  display: block;  
}
.foreground-image {/**/}

<div>
  <a href="#" class="background-image"></a>
</div>