我需要在背景图片上放置一些图片。我可以将图像放在背景图像上。但问题是没有。要放置在背景图像上的图像的数量不固定，而且要放置的图像每次都在变化。例如，有时我需要在背景图像上放置 4 张图像，有时我需要放置 5 张图像，依此类推。我不能每次都更改代码。
如何动态地将图像放置在背景图像上？
我用来将图像放在背景图像上的代码如下:
<html>
<head>
<title>Show Image over image</title>
<style type="text/css">
img { position:absolute; top: 25px; z-index: 2;}
.imgA1 { left: 0px; }
.imgB1 { left: 20px; }
.imgB2 { left: 15px; }
.imgB3 { left: 30px; }
.imgB4 { left: 45px; }
.imgB5 { left: 60px; }
.imgB6 { left: 75px; }
.imgB7 { left: 90px; }
.imgB8 { left: 105px; }
.imgB9 { left: 120px; }
</style>
</head>
<body>
<img src="background.png" style="z-index: 1;" class="imgA1"/>
<img src="a_0s.png" class="imgB1" />
<img src="line.gif" class="imgB2" />
<img src="line.gif" class="imgB3" />
<img src="line.gif" class="imgB4" />
<img src="line.gif" class="imgB5" />
<img src="line.gif" class="imgB6" />
<img src="line.gif" class="imgB7" />
<img src="line.gif" class="imgB8" />
<img src="http://upload.wikimedia.org/wikipedia/en/0/0d/Yellow_star.gif" class="imgB9" />
</body>
</html>
最佳答案
使用 css 背景图片，然后添加图片。
body {background-image:url("http://lorempixel.com/g/700/700");
background-repeat: no-repeat;width:100%;height:500px;}
img{border:1px solid red;margin:10px;}<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" /><img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />
<img src="http://lorempixel.com/40/20" width="40" height="20" />关于html - 如何显示不同的号码图像覆盖图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27377303/