html - 头像未正确放置在讲台 CSS 上

Question

我只是想知道如何让化身人物站在讲台上（另一张图片）。这是我的意思的一个例子。我希望化身人像图片 B 一样站在讲台上。

我玩过它，结果是错误的。

我究竟做错了什么？

谢谢。

score 1 · Accepted Answer

代码的重要部分是：

<img src="/path/to/avatar" />
<div id="avatar-holder"></div>

您在之前指定了图像div，因此它显示在顶部。我们想要它的头像。

因此，让我们将 html 更改为：

<div id="avatar-holder">
   <img src="/path/to/avatar" />
</div>

我们想自由地定位我们的图像，所以我们这样做：

#avatar-holder {position:static;}
#avatar-holder > img {position:absolute;}
/* OR:
#avatar-holder > img {position:relative;}
*/

现在你摆弄图像的top/left属性，可能分配负像素值，直到它看起来正确。仅适用于始终大小相同的图像，或者我们需要更复杂的东西。你也可以使用margins来做布局，但我不认为这很优雅。

如果结果应该让头像覆盖您的文本框，只需margin-top在头像持有者中添加一个。

使用背景图像时，您可能还想使用no-repeat; 您确实使用过的属性，color在text-shadow这里完全没用。

1 回答 1