CSS背景属性的奇怪/不同值答案

【问题标题】：Weird / different value for CSS background propertyCSS背景属性的奇怪/不同值
【发布时间】：2012-07-17 00:10:22
【问题描述】：

我正在检查一个网站的代码，我注意到它们通过 CSS 对元素的背景属性有一个不寻常的值。这似乎是一个渐变。有谁知道它是什么？如果有效？以及哪些浏览器支持它？

代码如下：

background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);

感谢所有帮助！

提前致谢！ :-)

【问题讨论】：

标签： html css svg

【解决方案1】：

嗯，第一件事是de-base64它：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <linearGradient id="hat0" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%">
        <stop offset="0%" stop-color="#fff" stop-opacity="0.65" />
        <stop offset="100%" stop-color="#fff" stop-opacity="0.9" />
    </linearGradient>
    <rect x="0" y="0" width="100" height="100" fill="url(#hat0)" />
</svg>

因此你可以看到，是的，它是一个渐变。非IE浏览器支持，IE 9+也支持。

【讨论】：

哦，好吧，所以它与.svg 文件作为背景是一样的吗？并有同样的支持？使用 base-64 版本比不做 / 使用 .svg 文件版本有什么优势吗？
使用base64版本意味着少了一个网络访问。当然，现在 base64 版本会大 33%（3 个字符需要 4 个 base64“数字”来编码），但这对于这么小的东西并不重要。有关数据 URI 支持，请参阅caniuse.com/#feat=datauri； IE 8+ 允许它在链接的 CSS 文件中。

【解决方案2】：

我认为所有现代浏览器都支持它。这是一个 base64 编码的可缩放矢量图形（您经常在 wikipedia 上找到那些用于地图的）文件，这意味着它包含许多字节，这些字节被转换为用于 ASCII 字符集。

【讨论】：

【解决方案3】：

它是 base64 编码的 SVG 文件。此约定是使用 SVG 图形文件作为嵌入背景图像的一种方式。我在这里对 Travelocity 徽标做同样的事情 http://mailmarkup.org/slideshow.xhtml

【讨论】：