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

我想设置背景图像,使其出现在前景图像的前面. 我尝试了以下代码,但它没有按预期工作： .background-image { border :0px; backgro

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

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

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

.

解决方法

. 这是一种方法.

如果这是您的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;}

在图像上设置位置：相对,并使用z-index：-1将图像更深入到堆叠顺序中.

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

. . .. ...