Question

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

以下是代码：

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

我感谢所有人的帮助！

提前致谢！： - ）

Answer 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+也支持它。

Answer 2

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

Answer 3

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

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

3 个答案: