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=是如何生成的，以及是否可以用稍微大一点的句柄来创建自己的{{1}}。我可以访问像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%包裹生成的字符串，并将其用作background图片。

有关atob的{{1}}和btoa JavaScript函数的更多信息 - 操作，see an article at MDN。

* - 请注意，避免额外请求的价格是CSS文件大小的33％。但这通常可以通过使用GZIP压缩来缓解。

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

1 个答案: