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>

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

2 个答案: