CSS控制div中背景图片的位置

Adrian Taylor 发表于 Dev

阿德里安·泰勒（Adrian Taylor）

作为UI的一部分，我试图使用html，css和jquery设计一个“指南针”小部件。我要实现的是：给定一个介于0到360之间的值，将图像定位为代表相应的指南针位置。例如，值0应该看起来像这样：

值90应该看起来像这样：

等等....

为此，我正在尝试在div标签中使用一个大图像作为背景图像，并尝试其位置：

这是我尝试过的css，在我的jquery代码中，我希望操纵位置百分比以控制图像的位置

#compass{
    background-image: url(../../resources/images/compass2.png);
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 25%;
}

对于我的一生，我无法弄清楚如何根据需要明确控制位置。例如，从图像的左边缘到第一个E字母的距离约为图像宽度的19％。我将如何将该距离与背景位置值关联起来？

阿德里安·卡里格

工作小提琴

看来您零度的起点大约是59.5％，而每个度的价值大约是0.20555％。因此，对于每个学位，您可以添加0.20555％作为起点。

Java脚本

function adjustImage() {
    var deg = $('#deg').val();
    var addDeg = 0.20555 * deg;
    var start = 59.5;
    var newDeg = addDeg + start;
    $('#compass').css({'background-position': newDeg + '%'});
}
adjustImage();

的HTML

<div id="compass"></div>
<input id="deg" placeholder="enter degrees" type="number" onchange="adjustImage()">

的CSS

#compass{
    background-image: url('http://i.stack.imgur.com/OLVFE.jpg');
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 59.5%;
    height: 91px;
    width: 600px;
    border: 1px solid black;
}

#deg {
    margin: 20px;
    padding: 5px;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。