1

100% のフッター div が 1 つあり、背景を適用したいと考えています。背景画像の幅は1350pxで、これが背景画像です

https://dl.dropbox.com/u/69217301/bg.png

ご覧のとおり、画像は曲線なので、画面サイズが 1350px より大きい場合、背景画像が繰り返されますが、繰り返しなしを設定すると、100% も塗りつぶされません。

だから私が知りたいのは、画面サイズが何であれ、フッターの背景を100％塗りつぶし、繰り返さないように設定できる方法はありますか？

親切に私を助けてください。CSS や Javascript など、どのような解決策でもかまいません。ありがとうございました。

4

4 に答える 4

2

試しましたbackground-position: centerか？これにより、ページが中央に配置されるため、ページを引き伸ばしても背景画像は中央に配置されます。

また: CSS の背景のストレッチとスケーリング

于 2013-02-06T02:02:04.813 に答える
1

これを行う最善の方法は、background-size をcover次のように設定することです。

CSS:

.cover{
    background-image: url("https://dl.dropbox.com/u/69217301/bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 126px;
}

結果ウィンドウが非常に小さいため、これをjsFiddleで確認するのは困難ですが、可能な限り拡大すると、ズームアウトして一般的なアイデアを得ることができます。これを別のページに置いて、実際の動作を確認してください。

于 2013-02-06T04:00:59.527 に答える
1

これにはbackground-sizeプロパティを使用できます。次のように書きます。

#footer{
 background-size:100% auto;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
}

詳細については、これを Rad http://www.css3.info/preview/background-size/

于 2013-02-06T02:04:38.163 に答える
1

背景画像を引き伸ばして、コンテンツ領域を完全に埋めます (CSS3):

div
{
background:url(image.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
于 2013-02-06T02:04:53.547 に答える