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

【问题标题】：How can I use %23 instead of # in Chrome?如何在 Chrome 中使用 %23 而不是 #？
【发布时间】：2019-03-19 00:51:03
【问题描述】：

如何在 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 控制台中收到以下警告：

[弃用] 在数据 URI 正文中使用未转义的“#”字符已被弃用，并将在 2018 年 12 月左右的 M71 中删除。请改用“%23”。详情请见https://www.chromestatus.com/features/5656049583390720。

好的，我把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 是一个小提琴。那么，如何将# 替换为%29？

另外，我想注意到here 的部分答案是错误的。

它告诉你

填充属性中的标签在我的情况下触发消息！将 # 更改为 %23 可以解决此问题。

但正如我上面解释的那样，情况并非如此。

【问题讨论】：

您可以只使用颜色名称而不是十六进制代码。这样您就不会收到任何错误消息。

标签： css google-chrome svg warnings hashtag

【解决方案1】：

既然您可以使用简单的 CSS 轻松做到这一点，为什么还要使用 SVG：

.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>

【讨论】：

您的.helloText 将执行以下操作：取一个 36 像素的正方形，将其移动到父对象的右下角。然后正方形将被从右上角到左下角的对角线分成两部分。的广场。经过这样的划分后，上部将变为透明，下部将变为#fff。我对吗？我只是从未使用过linear-gradient，感谢您阅读the 的文章，但这无助于理解这里发生的事情。
背景属性中值的顺序重要吗？
@YaroslavTrofimov 是的，就是这样 ;) 是的，当您有不同的背景时，顺序很重要，但是当您使用单一颜色时，它将始终是最后一层（底部）..所以颜色可以在任何地方使用，顺序只有在你考虑很多渐变或图像渐变等情况下才会生效

【解决方案2】：

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

【讨论】：