如何在HTML中将多个图像显示为一个图像

Question

我想使用HTML并显示一个大图像。 在这张大图像上，我希望能够在不同的地方和大小上显示多个较小的图像。

我更喜欢仅使用HTML。 但是，如果这是不可能的，Javascript或类似的东西也是一个选项...... :-) 如果有人对使用PHP有任何想法，那也很棒。

我搜索了网络和StackOverflow，并尝试了许多可能的解决方案，但没有一个允许我显示一个大图像，然后在这个大图像上显示多个其他图像。

非常感谢任何帮助。

亲切的问候， 迈克尔

Answer 1

您可以使用包含所有较小图像的容器div。您可以设置该特定div的背景。

你的html为

<div id="container">

</div>

和css如下：

div#container{

        background-image: url("image.jpg");
        background-repeat:no-repeat;
        height:100%;
    }

Answer 2

您不能仅使用纯HTML将图像覆盖在另一个图像上，但您可以做的是将图像的位置重新定位到另一个标记上，然后使用css进行相应的移动。

Answer 3

两种选择：

1. 使用CSS在背景中定义大图像，然后您可以将任何html标记添加到其中。这样的backgorund也可以为div s等元素声明，不仅适用于整个页面。

2. 在样式定义中使用绝对定位。这样，您可以将大小图像添加到标记中，然后将它们放在彼此的顶部。

这不需要javascript，而php与此无关。

Answer 4

你可以像我在这个JSFiddle中所做的那样定位它们：http://jsfiddle.net/xxUpk/

top:-NNNpx很粗糙，您可以使用float以及其他许多方法来定位它们。另请查看z-index以对其进行分层。