8

スケール ベクター イメージがあり、それをコンテナーに塗りつぶしたいと考えています。少し古いですが、SOにはこれらの種類の質問がいくつかあります。例: CSS 背景のストレッチとスケーリング

しかし、そのようなソリューションを実装しようとしたとき、結果は期待外れでした。

例えば：

    body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times", cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



}

いろいろアレンジしてみましたが、余白を残さずに伸ばすことはできません（繰り返すのは成功ですが、見栄えが悪いです）。

しかし、私は svg で作業しているので、おそらく間違った方法でこれにアプローチしていますか?代わりに html で svg xmlns タグを使用する必要がありますか? (PS IE8 では svgs を処理できないことは承知しています)

4

2 に答える 2

24

やってみました

background-size:cover;

いくつかの例を確認してください。

Webkitbackground-size:coverと SVG 背景画像に問題がありました。追加して解決しました

-webkit-background-origin:border;
于 2012-09-26T12:41:33.537 に答える
13

<svg>おそらく、SVG 画像自体の外側の要素の属性として preserveAspectRatio="none" を追加する必要があります。

画像ファイルを変更したくない場合は、試してみてください

背景画像: url('background_image.svg#svgView(preserveAspectRatio(none))');

Firefox 15 はそれをサポートし、おそらく他の UA もサポートします。

于 2012-09-26T12:57:07.810 に答える