这长串的CSS是什么？

Question

正在处理一个框架工作文件，并遇到了我从未见过的长串css。

html body .ow_button:hover .ow_ic_attach{background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20enable-background%3D%22new%200%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m2.814%2014.583c.083-.731.439-1.411%201.066-2.038l6.144-6.144c1.255-1.233%202.382-1.411%203.385-.532.9.919.521%201.877-.753%203.194l-5.675%205.643-.876-.968%205.611-5.612c.021%200%20.409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112%206.113c-.397.376-.617.741-.659%201.098-.042.417.146.836.565%201.254.438.354.81.506%201.112.454.304-.053.685-.299%201.145-.737.877-.856%202.042-2.01%203.495-3.448%201.453-1.441%202.493-2.486%203.12-3.134.021-.021.521-.48%201.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444%201.16l-6.709%206.709-1.097-1.066%206.709-6.74c1.045-1.024%202.111-1.562%203.198-1.615%201.087-.052%202.1.392%203.04%201.333%201.128%201.149%201.525%202.414%201.191%203.793-.209.794-.71%201.599-1.505%202.414-.92.899-2.236%202.205-3.95%203.919l-3.353%203.352c-.752.751-1.557%201.14-2.414%201.16-.731%200-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508%22/%3E%3C/svg%3E);}

有人知道这里到底发生了什么吗？我在哪里能了解到这里发生了什么？

Answer 1

这是一种在CSS data URI声明中使用data URI代替普通URI的技术。

让事情变得更令人困惑的是，上面的那个并不是你通常期望的那种data URI。(这将是base-64编码的data URI.这是一个不可逾越的，非常.非常..。很久..。字母数字字符串)。

相反，这是百分比编码的XML.(简单多了！)

事实证明，只要CSS XML是百分比编码的，SVG的SVG标记就可以在CSS background-image:声明中内联地包含" as - is“。

继续阅读：

• https://css-tricks.com/probably-dont-base64-svg/：克里斯·科伊尔
• 泰勒·亨特的http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

为了完整起见，下面是上面的SVG XML标记，解码了

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" enable-background="new 0 0 20 20">

    <path fill="#fff" d="m2.814 14.583c.083-.731.439-1.411 1.066-2.038l6.144-6.144c1.255-1.233 2.382-1.411 3.385-.532.9.919.521 1.877-.753 3.194l-5.675 5.643-.876-.968 5.611-5.612c.021 0 .409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112 6.113c-.397.376-.617.741-.659 1.098-.042.417.146.836.565 1.254.438.354.81.506 1.112.454.304-.053.685-.299 1.145-.737.877-.856 2.042-2.01 3.495-3.448 1.453-1.441 2.493-2.486 3.12-3.134.021-.021.521-.48 1.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444 1.16l-6.709 6.709-1.097-1.066 6.709-6.74c1.045-1.024 2.111-1.562 3.198-1.615 1.087-.052 2.1.392 3.04 1.333 1.128 1.149 1.525 2.414 1.191 3.793-.209.794-.71 1.599-1.505 2.414-.92.899-2.236 2.205-3.95 3.919l-3.353 3.352c-.752.751-1.557 1.14-2.414 1.16-.731 0-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508"/>

</svg>

Answer 2

这是一条所谓的道路。它是用enc语言编码的，解密可能需要一段时间，基本上%后面的数字是代码，表示类似空格或特殊字符的内容。例如%20 =空间..。我建议你不要乱搞那个代码，它的拷贝是正确的。如果您想解密cpde，请看一下：字符集: ASCII

我已经为你解密了这段代码(看下面)。这是用于URL解密的svg/ascii代码。以下是解密的代码：

image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" enable-background="new 0 0 20 20"><path fill="#fff" d="m2.814 14.583c.083-.731.439-1.411 1.066-2.038l6.144-6.144c1.255-1.233 2.382-1.411 3.385-.532.9.919.521 1.877-.753 3.194l-5.675 5.643-.876-.968 5.611-5.612c.021 0 .409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112 6.113c-.397.376-.617.741-.659 1.098-.042.417.146.836.565 1.254.438.354.81.506 1.112.454.304-.053.685-.299 1.145-.737.877-.856 2.042-2.01 3.495-3.448 1.453-1.441 2.493-2.486 3.12-3.134.021-.021.521-.48 1.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444 1.16l-6.709 6.709-1.097-1.066 6.709-6.74c1.045-1.024 2.111-1.562 3.198-1.615 1.087-.052 2.1.392 3.04 1.333 1.128 1.149 1.525 2.414 1.191 3.793-.209.794-.71 1.599-1.505 2.414-.92.899-2.236 2.205-3.95 3.919l-3.353 3.352c-.752.751-1.557 1.14-2.414 1.16-.731 0-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508"/></svg>

Answer 3

它正在访问W3.org中的SVG代码，作为背景图像使用。SVG是一种矢量类型的图像，如您在这里所看到的，您可以在URL上传递图像信息。