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/

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