Question

我有跨度，它的样式如下所示。我的问题是，它被设计为填充60px * 60px跨度。但现在，我必须让它填充50px * 50px大小的另一个跨度。但它无法使用背景位置，因为如果我改变背景大小，所有位置都会滑落。那么有什么方法（css或javascript hack）在绘制图像后用bacground-image调整图像或块元素的大小？我想避免重写所有背景位置（我为每个图标设置了课程，如“。娱乐”）。

<span class="icon icon2 entertainment"></span>

span.icon2 {
 float: left;
 width: 50px;
 height: 50px;
 margin: 5px 0 0 0;
}

#wrapper span.icon.entertainment {
 background-position: -60px -360px;
}

#wrapper span.icon {
 background: url(https://teeg.hu/image/icon.png);
}

感谢您的帮助！

Answer 1

没有纯粹的CSS解决方案。

有一个js解决方案。像你一样调整背景大小（背景大小），然后为每个元素移动大小/ 2之间的差异（在你的情况下是5px）。

您不会重写类，只需遍历元素。

注意：这可能会成为一个广泛的操作，最好重写类，尽管这是你想要避免的（40不是那么多......最多30分钟 - 包括测试）。

Answer 2

好的，我写了一些黑客。我调整了背景：

background-size: 100px 1550px;

并使用jQuery做到了：

 $(function() {
        $("span.icon2").each(function(index, value) {
            var pos = $(this).css("background-position").split(' ');
            var newPos = [];
            newPos[0] = parseInt(pos[0].replace("px", "")) / 60 * 50;
            newPos[1] = parseInt(pos[1].replace("px", "")) / 60 * 50;
            $(this).css("background-position", newPos[0] + "px " + newPos[1] + "px");
        });
    });

调整定位的背景图像

2 个答案: