javascript - 调整定位的背景图像

Question

我有 span，它的样式如下所示。我的问题是，它被设计为填充 60px*60px 跨度。但是现在，我必须让它填充另一个 50px*50px 大小的跨度。但它不适用于背景位置，因为如果我更改背景大小，所有位置都会消失。那么有什么方法(css 或 javascript hack)可以在绘制图像后使用 bacground-image 调整图像或 block 元素的大小？我想避免重写所有背景位置(我为每个图标设置了类，例如“.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);
}

感谢您的帮助!

Answer 1

没有纯粹的 css 解决方案。

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

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

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