0

我想将图像放置在另一个背景图像上，但是当我更改屏幕分辨率时，我想放置在背景图像顶部的图像会改变其位置。我使用下面的代码

       <div id="identification ">
            <div class="identification-image-1">
                <a href="form.html">
                    <img id="image-1" src="images/identification-1.png" alt="" />
                </a>
            </div>

            <div>
                <a href="form.html">
                    <img src="images/identification-new.png" alt="" width="100%" /> 
                </a>
            </div>
        </div>

CSS 代码：

#identification {
margin-top: 20px;
position: relative;
}

.identification-image-1 {
position: absolute;
margin-top: 200px;
margin-left: 350px;
 }

注意“images/identification-new.png”是宽度为 100% 的背景图片。上面的代码解决了我的问题，但是当我更改屏幕分辨率时，绝对位置不起作用。

4

1 回答 1

0

您的边距应设置为容器高度和宽度的百分比。当屏幕分辨率或浏览器窗口大小发生变化.identification-image-1时，会相对于容器移动。由于背景图像是容器的 100%，所以一切都会同步。

例如

.identification-image-1 {
position: absolute;
top: [your percentage];
left: [your percentage];
margin-left: [negative margin];
margin-top: [negative margin];
}

使用绝对定位使图像居中left:50%会将左边缘移动到浏览器的中心。使用 imgWidth/2 的负边距将图像的中心定位在浏览器的中心。

于 2013-10-30T19:24:36.180 回答