Question

我需要在背景图像上放置一些图像。我能够将图像放在背景图像上。但问题是没有。要放置在背景图像上的图像不是固定的，并且要放置的图像每次都会改变。例如，有时我需要在背景图像上放置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>

Answer 1

使用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" />

如何显示不同的没有。图像超过图像？

1 个答案: