如何将 10x10px 图像叠加到另一图像之上？

Question

我的网站上有一个用户头像。简单的图像标签：

<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">

现在，我想在图像的左上角浮动一个图像（Facebook 图标 - 10x10px）。

这表示用户已通过 Facebook 的身份验证。

我该怎么做？图像标签上的 CSS 样式，或者我必须有一个具有绝对定位的单独 div 吗？

不需要是透明的或任何东西，只需要精确定位在左上角。

当然，我不能只是物理地修改图像，因为我需要根据 Facebook 状态确定是否动态覆盖图像。但我希望动态添加一个 css 类。

有什么想法吗？

答案：

结合两个答案就可以了。使用 div 而不是另一个图像。

HTML：

<div class="foo">
   <div class="fboverlay"></div>
   <a>
      <img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
   </a>
</div>

CSS：

.foo
{
   position: absolute;
   top: 0;
   right: 0;
}

.fboverlay
{
    background-image: url('/image/facebook/logo.gif');
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
}

感谢您的帮助。

Answer 1

我知道我没有使用您想要的确切尺寸，但这里有一个适合您的工作示例。 （您需要父级“.main_photo”div 作为主照片的尺寸。）

.main_photo{
    position:relative;
    width:80px;
    height:80px
}
.inlay{
    position:absolute;
    top:5px;
    right:5px
}

<div class="main_photo">
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" />
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" />
</div>

Answer 2

首先，您必须定位它 - 通常是相对或绝对。

其次，如果有其他定位元素，您必须设置一个 z-index，尽管您可能不一定需要一个。

使用上/左或下/右组合将图像叠加在另一幅图像上。

这是没有看到任何 html/css 的建议。根据具体情况，显然会有所不同。

#el-on-top { position:absolute; top:0; left:0; z-index:1; }

您可能需要设置 position:relative ，以便 AP 元素的顶部相对于某些内容，而不是相对于包装器或整个页面。