css - svg作为背景不会显示

Question

我在 illustrator CS6 中创建了一个 .svg 文件。但是当我尝试使用 CSS 将其添加为背景时，如下所示:

html { 
    background: url(/path/to/images/layout/backgound.svg) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

不会显示。

尝试删除background-size-东西，但没有帮助...... 我使用 CodeKit 来缩小所有 CSS 文件并将其合并到一个文件中。试图不这样做，但也没有成功......

• 我使用 SVG 1.1 配置文件保存了文件
• 图像位置为“链接”
• 编码:“UTF-8”

我做错了什么？

如果我直接转到浏览器中的图像位置，它就会出现。但它没有显示为网站上的背景...

这是我网站的链接:http://kiledesign.no
以下是 .svg 的直接链接:http://kiledesign.no/assets/images/layout/bg_svg/background.svg

编辑:更改为使用 CSS.MediaQuery 和几个 .jpg-图像 - 现在...

Answer 1

如果您想使用 SVG 文件作为任何类型的图像(包括作为背景图像)，那么它必须是 privacy reasons 的单个文件。 。对任何内容(包括外部 CSS 或图像)的任何外部引用都将被忽略。

如果您的 SVG 文件包含外部图像文件，您需要将该图像转换为 data URI这样所有图像数据都在 SVG 文件本身中。