css / svg创建更大的背景图片

Question

我正在尝试将现有的图书馆背景图片替换为稍大的版本。 作为参考，它只是“可拖动”项目角上的一个小拖动手柄。 经过检查，我发现原始开发人员只是在设置一些背景图像，如下所示：

position: absolute;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=) bottom right no-repeat;
background-origin: content-box;

我想知道如何data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=是要生成的。 我可以使用诸如photoshop / illustrator之类的工具，但我认为这可能是过大了。 我想使灰色的小手柄在每个方向上都可能大5px。 不确定从哪里开始，欢迎任何建议。 谢谢！

编辑-这在Codepen中http://codepen.io/ajmajma/pen/NAmPQx

Answer 1

最初的开发人员使用了一种称为数据URI的巧妙技术，以避免不必要的图像资源请求*。 这是通过使用以下语法完成的： data(mime-type;base64,base64-string) 。

在浏览器中打开开发人员工具的控制台，然后运行以下代码（base64字符串来自您的示例）：

atob('PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=')

结果是浏览器如何看到此图像：

<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
    x="0px" y="0px" width="6px" height="6px"
>
    <g opacity="0.302">
        <path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/>
    </g>
</svg>

您可以根据需要在任何可视化编辑器中或仅通过文本编辑SVG代码，然后在浏览器的控制台btoa('updated-svg-code')中运行。 将结果字符串与data:image/svg+xml;base64,%UPDATED%包装在一起data:image/svg+xml;base64,%UPDATED%并将其用作background图像。

有关atob和btoa用于base64操作的JavaScript函数的更多信息， 请参见MDN上的文章 。

*-请注意，避免额外请求的代价是将CSS文件大小增加了33％。 不过，通常可以通过使用GZIP压缩来缓解这种情况。