Question

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

我希望每当你将它放在鼠标上时，碗上的小贴纸会移动一点（旋转20度或任何类型的动画）。

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

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贴纸，但由于我需要悬停效果，我最终遇到了同样的问题。

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

Answer 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%;
}

如何将一个图像固定到背景图像（响应）？

2 个答案: