0

ブラウザのサイズ変更に合わせて div のサイズを変更し、ページの読み込み時に最初に設定するために JavaScript を使用しています。(はい、私はそれが優雅に低下する必要があることを知っています。) CSS を介してすべてを行うことができない理由は、考慮する必要がある画面の上部に一定の高さを持つ固定ナビゲーション バーがあるためです。ブラウザー ウィンドウに合わせて div (およびそのグラデーション背景) のサイズを変更したいのですが、CSS の高さプロパティを変更すると、サイズ変更ではなく画像が切り取られてしまいます。つまり、ページの次のセクションが適切に遷移しません。これに対する簡単な修正はありますか？

私が現在使用しているCSSは次のとおりです。

    #homepage_aboutstrip {
        background-image:url('home/images/gradient-about-background.png');
        background-repeat:repeat-x;
        position:absolute;
        margin-top:0px;
        width:100%;
        height:1050px;
        z-index:1;
    }

また、背景画像ではなく IMG タグを使用することは明らかに機能しますが、ここではオプションではありません。

4

2 に答える 2

3

単一行のCSSでそれを行うことができます。動作する場合はこれを試してください

background-image:url('home/images/gradient-about-background.png');
background-size: cover

拡大しすぎると画質が乱れる場合があります

于 2013-04-21T16:54:53.330 に答える
1

IE7でも動作します。

background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */
于 2013-04-21T17:02:54.163 に答える