如何在 Chrome 中使用 %23 而不是 #？

Question

如何在 Chrome 中使用 %23 而不是 #？

html:

<div class="helloText">
hello text
</div>

css:

.helloText {
    background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:#fff;'></polygon></svg>" );
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: 100% 100%;

    padding: 20px;
    padding-bottom: 25px;
    margin-top: 35px;

    color: white;
    font-family: AvenirLT65Medium;
    font-size: 14pt;
}

资源

在这样的配置下一切正常。唯一的问题是我在 Chrome 控制台中收到以下警告：

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

好的，我把css改成：

.helloText {
        background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:%29fff;'></polygon></svg>" );
        background-repeat: no-repeat;
        background-size: 36px 36px;
        background-position: 100% 100%;

        padding: 20px;
        padding-bottom: 25px;
        margin-top: 35px;

        color: white;
        font-family: AvenirLT65Medium;
        font-size: 14pt;
    }

资源

Here 是一个 fiddle。那么，如何将 # 替换为 %29？

此外，我想指出 here 的答案部分是错误的。

它告诉我们

The hashtag in the fill attribute triggers the message in my situation! Changing the # to %23 fixes the issue.

但是我上面解释的不是这样。

Answer 1

为什么要使用 SVG，因为您可以通过简单的方式轻松做到这一点 CSS:

.helloText {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#fff 50%),
   #FF8500;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 100% 100%;
  padding: 20px;
  padding-bottom: 25px;
  margin-top: 35px;
  color: white;
  font-family: AvenirLT65Medium;
  font-size: 14pt;
}

<div class="helloText">
  hello text
</div>

Answer 2

您使用了 %29 而不是 %23。使用 %23，它按预期工作。

如何在 Chrome 中使用 %23 而不是 #？

How can I use %23 instead of # in Chrome?

css

svg

warnings

google-chrome

hashtag