如何在另一张图像上叠加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>