如何在HTML5中叠加两个图像

时间:2013-11-28 23:20:58

标签: html image

如何将我的徽标放在HTML5和/或CSS3中的另一个图像上

我在photoshop上为朋友做了这个

http://i.imgur.com/Mya3BB9.png

有2张图片,我不知道如何把它们放在彼此之上!

2 个答案:

答案 0 :(得分:5)

您可以将两个图像设置在绝对位置,然后将它们放在顶部,左侧,右侧,底部..

你的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

答案 1 :(得分:1)

一种方法是将一个设置为背景图像,将另一个设置为常规图像... 工作示例: http://jsfiddle.net/prashant_ghimire/fDuu5/7/

<!DOCTYPE html>
<html>
<head>
<style>
body 
{
background-image:url('http://wallike.com/wp-content/uploads/2013/04/flower-desktop-background-640x400.jpg');
background-color:#cccccc;
background-size:320px 280px;
background-repeat:no-repeat;

}
</style>
</head>

<body>
<h1>Hello World!</h1>
<img src="http://www.southeastern.edu/admin/stu_dev/family_day/images/selulogo.jpg" />
</body>
</html>