如何将一张图片固定到背景图片（响应式）？答案

【问题标题】：How do I pin one image to the background-image (responsive)?如何将一张图片固定到背景图片（响应式）？
【发布时间】：2023-03-11 23:25:01
【问题描述】：

我需要你的帮助！我有一张背景图片，当您将其悬停时，我需要该图片的一部分移动（旋转或缩放）。 This image is just an example but it's pretty similar what i have, except mine is more centered.

当您将鼠标悬停在碗上时，我希望碗上的小贴纸稍微移动（旋转 20 度或任何类型的动画）。

我已经裁剪了贴纸，所以现在我有两张图片。我使用背景作为我的 div 的背景。这是我的代码：

HTML:
<header class="background-image">
    <div class="sticker"></div>
</header>

CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }

我已设法将贴纸放置在应有的位置，但它没有响应。调整屏幕大小时，小贴纸会移动，我似乎无法找到解决方案。基本上我需要将贴纸固定到背景图像上，但我不知道这是否可能。我环顾四周，找不到任何有用的东西。

有人有什么建议吗？有什么方法可以只使用 CSS 来做到这一点？我只有 jQuery 的基本知识，所以我想避免这种情况，但如果这是唯一的解决方案，我也可以。

谢谢！！

编辑：我尝试使用与背景大小相同的透明 png 贴纸，但由于我需要悬停效果，我最终遇到了同样的问题。

【问题讨论】：

如果您的透明png贴纸实际上与背景大小相同怎么办？比你没有问题，2个元素，两个背景包含其中一个在悬停时放大。 ...否则，有一个小的 png 贴纸 - 你会遇到计算问题，试图让它始终处于相同的所需位置并像父级包含的 bg 图像一样调整大小......
Hmmmm...即使有两个相同/大小的图像，问题仍然存在于响应性和将实际transform-origin 居中以用于动画旋转等......
@RokoC.Buljan 我确实试过了，效果很好，但后来我遇到了同样的问题：因为我需要在贴纸上应用悬停效果，如果图像占据了整个屏幕它不起作用。我需要创建一个新元素，我可以将鼠标悬停在贴纸上并将其放在贴纸上......所以基本上是同样的问题。

标签： html css image responsive

【解决方案1】：

如果使用vw作为度量单位，贴纸可以根据元素的大小进行跟踪

.background-image {
background-image:
 url(http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg) !important;

height: 40vw;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.sticker{
 width:20px; height:20px; position:absolute;
 top: 20vw; left:40vw;
 background:red;
}

<header class="background-image">
    <div class="sticker"></div>
 
</header>

【讨论】：

@RokoC.Buljan 如果我理解正确，操作员在保持贴纸相对于背景的正确位置时遇到了麻烦，要看到这一点，您需要点击 Expand snippet 选项并调整大小浏览器窗口，虽然我可能误解了这个问题
andrew... 背景图像具有属性contain ... 和您的贴纸？比例/位置将被搞砸....如果您意识到contain 的工作原理。此外，您的贴纸尺寸始终相同。你的代码格式也很奇怪。

【解决方案2】：

我终于找到了解决办法！这是我的最终代码：

HTML:
<div class="background">
 <img src="..."/>
 <div id="pin" class="sticker">
 </div>
</div>

CSS:
.background {
  margin:10px;
  position: relative;
  display: inline-block;
}

.map img {
  max-width:100%;
  display: block;
}

.box {
  width:20%;
  height:20%;
  background-image:   url(...);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#pin {
  top:60%;
  left:46%;
}

【讨论】：