2

我一直在尝试使用 SVG 文件作为网站标题的背景，但它似乎没有出现在 Webkit 浏览器中（我尝试过 Chrome 和 Safari；在 Mac 上）。Firefox 似乎可以正确显示它。

这是我的CSS：

header {
  overflow: auto;
  width: 100%;
  height: 80px;
  background: url(../img/navbg.svg) no-repeat;
  background-size: 100%;
  -o-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;

  margin: 0 0 20px 0;
  padding: 0;

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  box-shadow: inset 0 0 1px #fff, 
    inset 0 1px 0 rgba(255,255,255,.3),
    0 1px 2px rgba(0,0,0,.5);
}

有想法该怎么解决这个吗？

4

3 回答 3

1

检查这个，它可能对你有帮助。 http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/

于 2012-07-16T09:36:58.597 回答
0

我在 2012 年 3 月找到了一个示例。带有警告：

“作为 CSS 包含的 SVG 无法编写脚本，定位也很困难。因此只能将这种方法用于背景插图。”

希望这会有所帮助：http ://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html

于 2012-08-10T17:53:40.637 回答
0

检查您的 SVG 是否缺少高度和宽度声明。没有这些，背景 SVG 将不会在 Safari 5 中显示。

于 2013-04-15T04:40:27.387 回答