하나의 이미지를 배경 이미지에 고정시키는 방법 (응답)?

Question

당신의 도움이 필요합니다! 나는 배경 이미지가 있고 마우스를 올릴 때마다 이미지의 한 부분 만 이동 (회전 또는 확대/축소)해야합니다. This image is just an example but it's pretty similar what i have, except mine is more centered.

마우스를 올려 놓을 때마다 조금 움직이는 사발에 작은 스티커 (정직하게 20 도나 어떤 종류의 애니메이션처럼 회전 시키길)를 원합니다.

나는 이미 스티커를 자르고 이제 두 개의 이미지가 있습니다. 내 div의 bg로 배경을 사용하고 있습니다. 여기 내 코드는 다음과 같습니다.

나는 그것이 있어야하는 곳에 스티커를 배치 할 수 있었지만 반응이 없습니다. 화면 크기가 조정되면 작은 스티커가 움직이며 그 해결책을 찾을 수 없습니다. 기본적으로 내가 필요로하는 것은 배경 이미지에 스티커를 고정하는 것이지만 가능하다면 나는 모른다. 나는 주변을 둘러 보았고 아무 것도 찾을 수 없었다.

누구에게 의견이 있습니까? CSS 만 사용하여이 작업을 수행 할 수있는 방법이 있습니까? jQuery에 대한 기본적인 지식 만 가지고 있으므로 피하고 싶습니다.하지만 이것이 유일한 솔루션이라면 그 점도 좋을 것입니다.

감사합니다.

EDIT : 배경과 같은 크기의 투명한 PNG 스티커를 사용해 보았습니다.하지만 호버 효과가 필요하기 때문에 결국 같은 문제가 발생합니다. 당신이 측정 단위로 폭스 바겐 사용하는 경우

Answer 1

, 스티커는

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