0

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

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

谢谢你的帮助！

4

2 回答 2

0

没有纯 CSS 解决方案。

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

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

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

于 2013-04-26T11:41:54.007 回答
0

好的，我已经写了一些技巧。我调整了背景的大小：

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");
        });
    });
于 2013-04-26T11:51:28.853 回答