如何在另一张图片上叠加10x10像素的图片? [英] How can i overlay an 10x10px image on top of another image?
问题描述
我在我的网站上有一个用户头像。简单图片标记:
I have a user avatar on my website. Simple image tag:
<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
现在,我想要浮动
这表示用户已通过Facebook身份验证。
This is to signify that the user is authenticated to Facebook.
我该如何做? CSS样式在图像标签上,或者我将必须有一个独立的div与绝对定位?
How can i do this? CSS styling on the image tag, or will i have to have a seperate div with absolute positioning?
不需要是透明的或任何东西,只需要定位
Doesn't need to be transparent or anything, just needs to be positioned exactly in the top-left corner.
当然,我不能只是物理修改图像,因为我需要确定是否基于Facebook状态动态地覆盖图像。但我希望动态添加一个css类。
Of course i cant just physically modify the image, as i need to determine whether to overlay the image dynamically based on the Facebook status. But i was hoping to dynamically add a css class.
任何想法?
ANSWER: / strong>
ANSWER:
使用这两个答案的组合。使用div代替其他图片。
Got it working with a combination of both answers. Used a div instead of another image.
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_photodiv作为主照片的尺寸。)
I know I'm not using the exact dimensions you wanted, but here's a working example for you. (You would need the parent ".main_photo" div to be the dimensions of the main photo.)
.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>
这篇关于如何在另一张图片上叠加10x10像素的图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!