如何使用 css 覆盖图像（跨浏览器）答案

【问题标题】：How to overlay images with css (cross-browser)如何使用 css 覆盖图像（跨浏览器）
【发布时间】：2013-08-11 17:46:59
【问题描述】：

最好的解决方案肯定是使用多个背景图片，不幸的是IE9

<a style="background: url('image1.png');" href="page.php"><img src="image2.png"/></a>

不幸的是，它不能正常工作。怎样才能把两张图片和image1.png的位置叠加在image2.png的左下角？

【问题讨论】：

你有什么问题？

标签： html css

【解决方案1】：

一个非常简单的解决方案是在 CSS 中使用绝对位置和相对位置。第一步是定义一个容器并应用position:relative，这样所有具有position:absolute的内部元素都将引用容器的坐标。然后我们可以在position:absolute; top:0; left:0; 上设置这两个图像，我们可以使用z-index 手动决定将哪一个发送到后台。总结：

<!-- HTML -->
<div class="container">
  <div class="image background"><img src="" alt="" /></div>
  <div class="image"><img src="" alt="" /></div>
</div>

和css：

/* CSS */
.container {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.image.background {
  z-index: 3;
}

【讨论】：

【解决方案2】：

是的，你可以做到，

--> 将<a> 的position 设置为相对

--> 将<a> 显示为inline-block

--> 明确提及background-size 并将<a> 的尺寸设置为background-image 的大小！重要！

--> 现在绝对定位<img> 到bottom: 0px 和left: 0px，不要忘记指定<img> 元素的尺寸！重要！

这是一个典型的 HTML 和 CSS（我使用了示例图像）--> JSfiddle View

HTML

<a id="id1" href="page.php">
    <img id="id2" src="http://www.wiljoaskesmontage.nl/rw_common/images/logo_small.jpg"/>
</a>

CSS

#id1
{
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/26/Ayyavazh_logo_small.PNG');
    background-repeat: no-repeat;
    background-position: left-bottom;
    background-size: 100px 100px;
    height:100px;
    width: 100px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#id2
{
    width:30px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
}

edit : 默认background-image在后台，<img>在前台，使用z-index指定显示顺序，z-index最高的元素会显示首先

【讨论】：