Question

我试图将多个div放在背景图像上，这样就可以产生很酷的效果。主要问题是网站是响应性的，图像也是如此 - background-size: cover这使得在查看更大/更小的屏幕时难以将覆盖精确地保持在他们需要的位置。我创造了一个粗略的JSFiddle来表明我的意思。在这个例子中，我试图将动画框叠加在考拉的眼睛上。

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

我真正想要的是如何在这张背景图片上找到如何跟踪坐标的确切位置，或者指出我在不同的方向来解决这个问题。

＆＃13;

#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; }

＆＃13;

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

＆＃13;

Answer 1

由于你要求指向一个方向，这就是我要尝试的：如果＃koala-divs高度固定为768px，宽度响应为100％，我会尝试使用：

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

我猜你现在可以计算旋转div相对于＃koala-divs宽度的位置和背景图像的比例。

一旦你知道眼睛相对于图像的x坐标（例如左边40％和右边60％），X坐标应该很容易

我假设Y坐标有点棘手。假设您的图像尺寸为1200 x 800.其比例为3：2（12：8 - > 6：4 - > 3：2）。

现在您可以使用jquery / javascript获取＃koala-div的总宽度，并将其乘以0,666666666666666666666666（三分之二）以获得背景图像的实际高度。

从那里你可以得到类似于我为x坐标提出的方式的y坐标。但你需要把它想象成垂直切成两半并相对于每一半的位置。

我不知道你是否可以关注我的，或者即使它们有用。由于我今天没有足够的时间，所以我希望这有助于......

周二过得愉快！

编辑/注：

只要div至少与图像一样宽，图像就会覆盖div ...如果它变小或变窄，你将在图像的上方和下方获得空白区域。

Answer 2

更简单的解决方案是使用窗口宽度更改来获得优势。因此，通常情况下，您可以测量窗口大小的变化，并从眼睛的当前位置中减去该值。但是，因为您的背景居中，所以您需要稍微改变一下 - 取旧窗口位置，减去新窗口位置并将结果除以2。

我用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/

免责声明：这并不完美。它缩小了很多，但随着你超过一定的尺寸，它们开始相互接近 - 但希望这足以让你走上正轨。此外，它不适用于缩小，但适用于放大。

位置Div在背景图像上方（覆盖/代表）

2 个答案: