如何在HTML5中叠加两张图片

Question

如何在HTML5中叠加两张图片

htmlimage

3

如何在HTML5和/或CSS3中将我的标志放在另一张图片的顶部

我曾经为朋友在Photoshop上做过这个。

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

有两张图片，我不知道如何将它们叠放在一起！

- user3047553

2个回答

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>

- Prashant Ghimire

谢谢！但是我背景重复了，我尝试在CSS中添加norepeat，但它没有起作用:( 背景就消失了。 - user3047553

在颜色属性之后的 CSS 的最后一行添加 background-repeat:no-repeat;。 - Prashant Ghimire

有一件事，我在CSS方面完全是个新手，你能告诉我如何调整<img>标签的大小并将其向左移动一点吗？ - user3047553

有几种方法可以做到这一点。哪种方法最好取决于你想要做什么。你可以在w3schools.com学习HTML和CSS定位。他们有适合新手的漂亮易懂的教程。 - Prashant Ghimire

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Ster · Accepted Answer

您可以将两个图像设置为绝对位置，然后使用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