javascript - 将 Div 放置在背景图像顶部(覆盖/响应式)

Question

我正在尝试将多个 div 放置在背景图像的顶部，以便产生很酷的效果。主要问题是网站是响应式的，图像也是响应式的 - 它是 background-size: cover ，这使得在查看更大/更小的屏幕时很难将叠加层准确地保持在需要的位置。我创建了一个粗略的 JSFiddle来表达我的意思。在此示例中，我尝试将动画框覆盖在考拉的眼睛上。

我不确定是否更容易获得我想要覆盖的位置的坐标并使用它，或者我是否需要使用窗口偏移。因为它也是居中的，并且当缩小时它会改变 position-y 并且我不确定如何跟踪它作为背景图像。

我真正希望的是了解如何跟踪此背景图像上坐标的确切位置，或为我指明解决此问题的不同方向。

#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

一个更简单的解决方案是利用窗口宽度的变化来发挥自己的优势。因此，通常情况下，您会测量窗口大小的变化，并从眼睛的当前位置中减去该变化。但是，由于您的背景居中，因此您需要稍微改变一下 - 采用旧窗口位置，减去新窗口位置，并将结果除以二。

我已经用 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)
    });
});

这是一个更新的 jsfiddle 示例；

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

免责声明:这并不完美。它缩小得很大，但是当你超过一定的尺寸时，它们开始相互靠近 - 但希望这足以让你走上正确的轨道。此外，它对于缩小效果不太好，但对于放大效果很好。