如何在样式表的 URL 中换行

Question

我有一个包含很长行（数据 URL）的样式表。无论如何我可以把这些线分成更小的线吗？

长行示例：

background-image: url(data: image/png;base64, really long string);

Answer 1

为此，您可以将 URI 括在引号中，并在 URI 内的每一行末尾附加一个 \，后跟一个换行符。 The parser will treat URI 中的字符串，就好像 \ 和紧随其后的换行符不存在一样。

当使用不是 Base64 编码数据 URI 的 URI 执行此操作时，您需要确保字符串内没有缩进，否则 link 将不起作用。这是因为空格在 URI 中很重要。空格在 Base64 字符串中并不重要，因此在 Base64 编码的数据 URI 中保留缩进是可以的，但那是 Base64 字符串的属性，而不是 URI。如果这让您感到困惑，为了简单起见，请不要缩进。

这是一个例子：

#circle {
  width: 16px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ\
CAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvw\
AAAB6SURBVDhP3ZPLEcAgCERpwSYpLi3YgrWkBbLAIYHJZEi45fBUPq4jColIhIjBBmAF1Mc5/zSIBl\
jmekZzRhTwzbuZNTTXRGCZQOXkzHIBv3MOVmEVmMn5hqkCd4EyPxFoF7H5jJiwaHwkDJiaX1lxkY/Nd\
MVrUmxnoQPGWQ2Hnu//1wAAAABJRU5ErkJggg==');
}

<div id=circle></div>

如何在样式表的 URL 中换行

How to break lines in URLs in stylesheet

css

url

data-uri