Question

我有很多css看起来像这样：

.T {
background-size: 1.8rem, auto;    
background-image: url('./Images/ListIcons.svg#T');
padding-left: 1.8rem;
}

ListIcons.svg是图像的堆叠（其中一个＆＃34;是＆＃34; T）。然后我可以在包含节点的文本上使用这样的类：

<label class="T">some text</label>

呈现如下：

<T image>some text

它不再适用于Chrome，并且很快就会停止在其他浏览器中工作（标准专家必须修复SVG / CSS *的问题）。

我听说应该回到好的旧的精灵地图技术。据我所知，没有办法将背景图像剪辑到想要的部分，更不用说使用背景尺寸了。

有解决方法吗？

修改： 我想我可以以某种方式隐藏部分背景而不是剪裁它。
它是这样的：

.ButtonType {
    background-size: 0.1rem 100%, 100% 100%, auto 1.8rem;
    background-position: left center, 1.9rem center, calc(-6 * 1.8rem + 0.1rem) center;
    background-image: url('./Images/White.png'), url('./Images/White.png'), url('./Images/ListIcons.svg');
}

（第6张图片，大小为1.8 / 1.8 rem从左边填充0.1rem +隐藏＆＃34;非第6张图像＆＃34;使用白色图像）。

它长，颜色依赖（无论背景是另一种颜色，都必须重写几乎完全相同的两条线），并且必须重复每次使用精灵地图作为背景。

简单地说：它很糟糕（但它有效）。

我想回到1张图片= 1文件，而不是试图减少#file文件访问。

没有更多的SVG堆叠技术，现在怎么办？

0 个答案: