CSS - 将一张图片覆盖在另一张图片之上

Question

我很难用言语来描述这个问题，所以我将通过图片向您展示。

这是我的设计师打算在我们网站侧边栏中显示的Gravatar图像：

这是我制作的覆盖图像（从Photoshop截屏）：

这是目前的效果...

我正在使用以下CSS代码：

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

以下是XHTML代码（还包括一小段PHP代码，用于根据从数据库中获取的用户电子邮件地址获取Gravatar头像）：

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

那我该怎么办呢？我不能使用相对定位，因为它会使下面 div 中的单词“搜索”保持向右移动。

感谢您的帮助！

杰克

- Jack

---

如果您在Doctype上提问，可能会有更好的运气：http://doctype.com/ - Sasha Chedygov

Answer 1

您尝试过使用z-index来强制两个图像重叠吗？也许可以像这样做：这里有一个伪例子。

<div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}

- Jon

---

这正好达到了我想要的效果！非常感谢你的帮助！ :) - Jack

如果您想在房地产列表顶部添加“已售出”或“销售待定”图像，这是非常好的。 - Frank Luke

Answer 2

相对定位在哪里不能使用？在gravatar图片上吗？

我不禁想知道为什么你把覆盖层的div放在了图片容器之外。至少它们应该是兄弟元素。创建一个只包含图片和覆盖层的容器，然后将覆盖层绝对定位到0,0以覆盖在图片上方。

    <div class="gravatarsidebar">
        <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
        echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
        <div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>  
    </div>

- Tesserex

---

我无法在叠加图像上使用相对定位，因为当我将其向上移动时，它仍然留下其宽度的“间隙”，从而将单词“搜索”推向右侧。不过我会尝试您的建议，并很快回报！ - Jack

很抱歉，但是你的代码没有起作用。我猜你在写style="position:relative"时应该是想写position:absolute，但是无论怎么尝试都得到了同样的效果。使用absolute时，它只会停留在浏览器视口的左上角... - Jack

如果可以的话，请将gravatarsidebar类的位置设置为相对定位。这样它就成为其子元素定位的参考框架。这就是为什么当前它会到浏览器的左上角 - 它的参考框架是body，而不是sidebar容器。 - Tesserex

啊，谢谢！我一直在想那里出了问题。现在一切都很好 :) - Jack