将 Div 定位在背景图像的顶部（覆盖/响应）

Question

I'm trying to position multiple divs on top of a background image so it makes a cool effect. The main issue is that the website is responsive and so is the image - it's background-size: cover which makes it hard to keep the overlays exactly where they need to be when viewing larger / smaller screens. I've created a crude JSFiddle to show what I mean. In this example I'm am trying to just overlay the animated boxes over the Koala's eyes.

I'm not sure if it's easier to get the coords of where I want the overlays to be and work with that or if I need to work with the window offset. Since it's also centered and when zoomed out it changes position-y and I'm unsure how to even track that being a background image.

Really what I'm hoping for is to get some insight on how to track the exact position of coords on this background image or point me in different direction to solve this issue.

 #koala { background: url( 'http://i.imgur.com/1xZ17bk.jpg' ) no-repeat center; background-size: cover; position: relative; width: 100%; height: 768px; } #leftEye, #rightEye { width: 20px; height: 20px; background-color: #F00; position: absolute; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } #leftEye { top: 48%; left: 37%; } #rightEye { top: 59%; right: 35%; } @-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .notneeded { width: 100%; height: 50px; background-color: beige; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header" class="notneeded"></div> <div id="koala"> <div id="leftEye"></div> <div id="rightEye"></div> </div> <div id="footer" class="notneeded"></div>

Answer 1

Since you asked for pointing in a direction this is what I would try: If the #koala-divs height is fixed 768px and width responsive 100% I would try to work with:

background-size: 100% auto;
background-position: center; 

I guess now you could calculate the position for the rotating divs relative to the #koala-divs width and the proportion of the background-image.

X-coordinates should be easy once you know the x-coordinates of the eyes relative in the image (for eg 40% left and 60% right)

Y-coordinates are a bit trickier I assume. Lets say your image is sized 1200 x 800. Its proportion is 3:2 (12:8 -> 6:4 -> 3:2).

Now you could get the total width of the #koala-div with jquery/javascript and multiply it with 0,666666666666666666666666 (two thirds) to get the actual height of the background image.

From there you can derive the y-coordinates similar to the way i proposed for the x-coordinates. But you need to imagine it to be verticaly cut in half and position in relatively in each half.

I don't know if you can follow my thoughs or even if they are useful. Since I got not enough time today I hope this helps nevertheless...

Have a nice Tuesday!

edit/note:

The image will just cover the div as long as the div is at least as wide as the image... If it gets to small/narrow you will get empty space above and below the image.

Answer 2

A much simpler solution is to use the window width changes to your advantage. So, ordinarily, you would measure the changes in your window sizes and subtract that from the eye's current position. However, because your background is centered, you need to alter that slightly - take the old window position, subtract the new window position and divide the result by two.

I've done this with jQuery.

var leftEye = $('#leftEye');
var rightEye = $('#rightEye');
var oldLeftEyePos = leftEye.position().left;
var oldRightEyePos = rightEye.position().left;
var oldWindowWidth = $(window).width();

$(window).resize(function(){
  var newWindowWidth = $(window).width();

    leftEye.css({
      left: oldLeftEyePos - ((oldWindowWidth - newWindowWidth) / 2)
    });

    rightEye.css({
      left: oldRightEyePos - ((oldWindowWidth - newWindowWidth) / 2)
    });
});

Here's an updated jsfiddle with an example;

http://jsfiddle.net/joe5hjr3/10/

Disclaimer: This isn't perfect. It shrinks great, but as you go above a certain size, they start to close in on eachother - but hopefully, this is enough to get you on the right track. Also, it does not work great for zooming out, but works fine for zooming in.