我怎样才能在另一张图片上叠加一张10x10px的图片?[英] How can i overlay an 10x10px image on top of another image?

本文是小编为大家收集整理的关于我怎样才能在另一张图片上叠加一张10x10px的图片?的处理方法,想解了我怎样才能在另一张图片上叠加一张10x10px的图片?的问题怎么解决?我怎样才能在另一张图片上叠加一张10x10px的图片?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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

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

现在,我想在图像左上角的此图像上

上的图像 float 图像(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;
}

感谢您的帮助.

推荐答案

我知道我不使用您想要的确切尺寸,但这是您的工作示例. (您需要父级" .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>

其他推荐答案

首先,您必须position position通常是相对或绝对的.

其次,您必须设置z-index如果还有其他位置元素,尽管您不一定需要一个.

使用top/left或bottom/right组合将图像分层在另一个图像上.

这是建议,没有看到任何HTML/CSS.这显然会根据情况有所不同.

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

您可能需要设置position:relative,因此AP'D元素的顶部是相对于某物而不是包装器或整个页面的内容.

本文地址:https://www.itbaoku.cn/post/583424.html