背景图像上的 svg 图案答案

【问题标题】：svg pattern on background image背景图像上的 svg 图案
【发布时间】：2011-09-11 11:45:16
【问题描述】：

是否可以将 .svg 图案作为背景图片，svg 图案应调整为窗口宽度和高度。

【问题讨论】：

【解决方案1】：

这是可能的，但受限于浏览器支持。 Webkit 往往拥有最好的 SVG 支持，而 IE 最差。您可以使用 CSS 和 CSS3 background-size 属性分配它。

body {
  background: url(bg.svg) no-repeat;
  background-size: 100%;
  -o-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
}

您可以通过将 SVG 放在 <img> 中并绝对定位和拉伸它在您的内容后面来争取更多支持。这是因为 IE 在历史上对 SVG 作为 <img> 或 <object> 的支持比作为 CSS 资源更多。

【讨论】：

你在开玩笑吗 webkit 有最好的 svg 支持？ Nobody has beaten opera yet 。关于你的css，opera不需要 -o- 前缀作为背景大小，并且必须将无前缀语句放在所有前缀语句之后。