CSS 如何实现图片背景和子元素位置精准匹配

本文将介绍如何使用 CSS 实现将图片作为背景，并将其子元素放置在与背景图片中相同位置。

需求背景

例如，将一张城市地图作为背景，并使用子元素代表各个建筑，用户点击子元素可以获取更多信息。

然而，当页面在不同设备上显示时，由于设备屏幕尺寸和分辨率的不同，子元素的位置可能会发生偏移，导致与背景图片中的位置不匹配。

解决思路

可以使用 CSS 的 vw 和 vh 单位来定义子元素的大小和位置。vw 和 vh 分别表示视窗宽度的百分比和视窗高度的百分比，能够确保子元素在不同设备上保持与背景图片的相对位置一致。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片背景和子元素位置精准匹配</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .background {
            width: 100vw; 
            aspect-ratio: 1024 / 768; /* 设置背景图片的宽高比 */
            position: relative;
            border: 1px solid red; /* 用于测试，实际使用时可以删除 */
        }
        .mine {
            border: 1px solid red; /* 用于测试，实际使用时可以删除 */
            position: absolute;
            width: 20vw;
            aspect-ratio: 1; /* 设置子元素的宽高比 */
            top: 0%;
            left: 40%;
        }
        .house {
            border: 1px solid red; /* 用于测试，实际使用时可以删除 */
            position: absolute;
            width: 18vw;
            aspect-ratio: 1; /* 设置子元素的宽高比 */
            top: 6%;
            left: 7%;
        }
        .mine:hover, .house:hover {
            filter: drop-shadow(5px 5px 5px #4444dd); /* 鼠标悬停时的效果 */
        }
    </style>
</head>
<body>
    <div class="background">
        <div class="mine"></div>
        <div class="house"></div>
    </div>
</body>
</html>

解释

.background 类定义了背景图片容器，宽度设置为视窗宽度，高度根据 aspect-ratio 属性保持与背景图片的比例一致。
.mine 和 .house 类分别定义了子元素，使用 vw 单位定义宽度，使用 top 和 left 属性设置相对于容器的偏移量。
aspect-ratio 属性用于保持子元素的比例，避免变形。

相关文章：

本文标签: