如何在HTML5中叠加两个图像 [英] How can I overlay two images in HTML5
本文介绍了如何在HTML5中叠加两个图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将我的徽标放在HTML5和/或CSS3中的另一个图像上
How can I put my logo on top of another image in HTML5 and/or CSS3
我在photoshop上为朋友做了这个
I did this on photoshop for a friend
http://i.imgur.com/Mya3BB9.png
有2张图片,我不知道如何把它们放在彼此之上!
there are 2 images, I have no idea how can I put thos on top of each other!
推荐答案
您可以将两个图像设置在绝对位置,然后将它们放在顶部,左侧,右侧,底部..
You can set the two images in an absolute position and then position them with top,left,right,bottom..
您的html
<div id="image1"> <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"></div>
<div id="image2"> <img src="http://www.desktop-bilder.com/images/wallpapers/40-wiese-und-himmel.jpg"> </div>
你的css
#image1 {
position: absolute;
top: 20px;
left: 20px;
}
#image2 img {
width: 80%;
}
编辑:检查这个 FIDDLE
这篇关于如何在HTML5中叠加两个图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文