0

对于按钮，如果我需要背景图片，我会使用如下背景

#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

现在我如何将这种类型的图像添加为图像的前景。当我对图像使用相同的背景属性时，常规图像将重叠是我需要的是 CSS 的前景类型。图像上的图像。

4

2 回答 2

3

所以你想把另一个图像放在一个上面，对吧？你可以这样做：

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/

这种方法的好处是你仍然有一个实体元素，而不是浮动的包装器。

于 2013-01-01T00:50:59.740 回答
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>

现在带有 id#img1的图像位于图像下方#img2，因为z-index值较低...

于 2013-01-01T00:41:35.337 回答