css - 在 Reddit 上将 spritesheet 位置设置为锚标记的背景

Question

所以，我们在侧边栏有这个排名表，它的左边附加了球队的标志作为背景。我们设法正确地设置了它的样式，但考虑到大量团队和 Reddit 对允许的图像数量的限制，我们被迫切换到精灵表。但是，我在尝试设置它时失败了。

精灵表由几个 45x45 像素的徽标组成，但我们试图将其设置为 22x22 像素的侧边栏。我尝试将背景图像的大小调整为适当的大小（原始大小为 1440x90px，但对于 22x22px，它将为 704x44px，因为最大宽度的行有 32 个徽标）但从未设法在 spritesheet 中获得正确的位置或正确的显示） .

这是一组规则，它们完成了我们正在尝试做的事情，但使用与示例相关联的单个徽标图像：

.md a[href*="clubcode=BER"]
 {
    background-size: 22px;
    background-repeat: no-repeat;
    padding: 5px 0 5px 25px;
    display: block;
    background-image: url(%%alba%%);
}

如果你看一下subreddit，我把这个留作参考（阿尔巴柏林）。

尝试了几种方法，但最终未能设置所需的尺寸。

.md a[href*="clubcode=BER"]
 {
    background-image: url(%%sheet%%);
    background-size: 704px 44px;
    background-position: 0 0;
    padding: 5px 0 5px 25px;
    display: block;
} 

在此处设置宽度和高度将使整个锚点变为该大小，而不是背景。也弄乱了:before伪元素，但它根本不会显示，大概是因为锚点可能会填充整个表格单元格。

考虑到更改 DOM 不是一种选择，只能通过 CSS 完成。

精灵表： https ://b.thumbs.redditmedia.com/FcgEv48G-d1i-5z0msnd2z1CdlZS14QcQprQcFQVdqA.png

标签： css