Question

我一直在尝试使用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);
}

有关如何解决此问题的任何想法？

Answer 1

检查一下，它可能对您有所帮助。 http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/

Answer 2

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

＆＃34;包含SVG的SVG无法编写脚本并且定位很难。因此，只能将此方法用于背景插图。＆＃34;

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

Answer 3

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

不能在Webkit中使用SVG作为CSS背景

3 个答案: