调整窗口大小时防止图像在背景上移动答案

【问题标题】：Prevent image moving on background when resizing window调整窗口大小时防止图像在背景上移动
【发布时间】：2023-01-30 14:18:27
【问题描述】：

我有一张背景图片（野餐场景），我复制了上面的一个甜甜圈，将其放在原来的甜甜圈上，并只使该区域可点击。它必须保持在原位，以便任何用户无论显示器大小或窗口大小如何，都将在该位置看到甜甜圈，而不是在不同分辨率的不同位置。

我使用甜甜圈的百分比来尝试使其响应并与背景一起移动和调整大小。当您调整窗口大小时，野餐和甜甜圈会很好地调整大小，但甜甜圈也会四处移动，它不会留在原地。

我只希望单独的甜甜圈是可点击的，而不是它后面的原始甜甜圈，这样用户就会明白他们必须点击特定的东西。

我想也许可以使用某种覆盖解决方案，但没有办法在图像中制作一个“洞”，只能制作一个透明区域。
我有几个其他场景也有完全相同的问题，但背景是一个 gif，另一个是视频，所以即使覆盖可以解决它，我也必须为帧做大量的编辑帧gif，然后获取视频的视频编辑软件。

这是问题的最小示例和重现：

body{   
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg"); 
}
#donut {
width:10%;
margin-left:50%;
margin-top:40.5%;
    color:#fff;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

#donut:hover {
    width:30%;
}

<!doctype html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="movie">
    <div class="scene" id="picnic">
        <img class="clickable" id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
    </div>
</div>
</body>
</html>

我看到了这个建议，但我不明白它如何适合我的情况，或者在我的情况下如何/在何处添加解决方案：How to prevent image moving when resizing window

我还应该补充一点，我复制甜甜圈以将其放回原处的另一个原因是因为我想在悬停时为其设置动画（正如您在测试时看到的那样），以便用户看到它是可交互的。

【问题讨论】：

请编辑问题并使用 sn-p 工具 <> 加载您的 html 和 css，包括图像的有效链接。
这只能通过保持图像的纵横比来实现。您可能需要 `background-size: contains`。

标签： javascript html css css-position

【解决方案1】：

尝试使用 HTML<area> 标签。这允许您将坐标映射到甜甜圈。因为您甚至不需要创建新元素，只需指定它的位置即可。它也应该适用于视频。

【讨论】：

好主意！我会有战利品。尽管我已经设法使用更传统的方法解决了它。结果 background-size: 100% 100%; 做了我想要的。不过谢谢你的建议！

【解决方案2】：

看来我设法修复了它。当我将 background-size: cover; 更改为 background-size: 100% 100%; 时，它开始运行。

    body{
        margin: 0;
    }
    
    #picnic{   
        width: 100%;
        height: 100%;
        position: absolute;
        overflow:hidden;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-size: 100% 100%;
        background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
    }


    #donut{
        width:9.3%;
        height: 8.2%;
        left:50.5%;
        top:72.2%;
        position:absolute;
    }
    #donut:hover{
        width:21.3%;
        height: 16.8%;
        top:65.2%;
        left:42.5%;
    }

<!doctype html>
<html>
<head>
</head>
<body>
    <div id="picnic">
        <img id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
    </div>
</body>
</html>

现在我可以调整窗口大小，甜甜圈将留在原地，但会以我希望它展开的相同比例展开。

【讨论】：