Question

如果我需要背景图片的按钮我会使用下面的背景

#statusButton span {
    color: #445058; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 1px 1px #fff; 
    padding: 7px 29px 9px 10px;
    background: url('../images/Arrow.png') no-repeat 53px 7px;
    display: block;
}

类似于此处http://www.soundendeavors.com/clients/index.html

现在如何将此类图像添加为图像的前景。当我使用相同的背景attr图像th常规图像将重叠是我需要的是前景类型的CSS的东西。图像上的图像。

Answer 1

所以你想把另一张图片放在一张图片上，对吧？你可以this way：

div{      /*You can use whatever element you prefer*/
    width: 400px;
    height: 400px;
    background-image: url('link1.jpg'), url('link2.png');     /*URLs*/
    background-position: left top, right bottom;              /*position*/
    background-repeat: no-repeat;                             /*repeat or not*/
}

快速而简单。列表中的第一个图像将显示在最顶层。

演示：http://jsfiddle.net/DerekL/Pdxpe/

这个方法的好处是你仍然有一个实体元素，而不是漂浮在周围的包装。

Answer 2

如果我理解你，你想要将另一张图像叠加在图像上吗？

在现有图像上叠加另一个图像您可以使用CSS中的位置：

CSS：

#wrapper {
    position: relative;
}
#img1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index:0;
}
#img2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
}

HTML：

<div id="wrapper">
  <img src="img1.jpg" id="img1" />
  <img src="img2.jpg" id="img2" />
</div>

现在，身份#img1的图片位于图片#img2下方，因为z-index值较低...

将前景图像添加到图像

2 个答案: