html - 如何使用 css 覆盖图像（跨浏览器）

Question

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

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

不幸的是，它不能正常工作。如何在 image2.png 的左下角覆盖两个图像和 image1.png 的位置？

Answer 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;
}

Answer 2

是的，你可以做到，

--> 将positionof设置<a>为相对

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

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

--> 现在绝对定位<img>到bottom: 0pxand 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;
}

编辑：默认background-image在后台和<img>前台，用于z-index指定显示顺序，最高的元素z-index将首先显示