调整大小时防止图像在背景上移动 window

Question

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

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

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

我想也许可以使用某种覆盖解决方案，但没有办法在图像中制作一个“洞”，只能制作一个透明区域。
我有几个其他场景也有完全相同的问题，但背景是一个 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

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

Answer 1

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

阅读更多： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Answer 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>

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

调整大小时防止图像在背景上移动 window

问题描述

2 个解决方案

解决方案1
0 2023-01-28 13:47:50

解决方案2
0 已采纳 2023-01-30 06:18:27

调整大小时防止图像在背景上移动 window

问题描述

2 个解决方案

解决方案1 0 2023-01-28 13:47:50

解决方案2 0 已采纳 2023-01-30 06:18:27

解决方案1
0 2023-01-28 13:47:50

解决方案2
0 已采纳 2023-01-30 06:18:27