2

サイトのヘッダーの背景として SVG ファイルを使用しようとしましたが、Webkit ブラウザーに表示されないようです (Mac で Chrome と Safari を試しました)。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

SVG に高さと幅の宣言がないかどうかを確認してください。これらがないと、背景の SVG は Safari 5 で表示されません。

于 2013-04-15T04:40:27.387 に答える
0

2012 年 3 月に行われた例を見つけました。警告付き:

「CSSとして含まれるSVGはスクリプト化できず、配置が難しい。したがって、この方法は背景イラストにのみ使用してください。」

これが役立つことを願っています: http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html

于 2012-08-10T17:53:40.637 に答える