0

サイトの背景として画像を使用しています。黒/白のグラデーションがあり、幅は 1px です。

CSS:

background-image:url('../image/gradient.png');

それはそれ自体を繰り返します。画像の高さは 2000px です。

画像の高さを動的に変更して、すべてのページ サイズに適合させることは可能ですか: ページの高さが 2000px 未満の場合、画像の高さは小さくする必要があります。大きくする必要があります。

前もって感謝します

ブラウザー内でさまざまなグラデーション手法を試しましたが、すべてのブラウザーで同じように機能するとは限りません。

4

4 に答える 4

1

私は通常、この問題に2つの方法のいずれかでアプローチします。

CSS3を使用できる場合は、CSSグラデーションを使用します（グラデーションを試すには常にhttp://colorzilla.com/gradient-editor/が適しています）。次に、これをウィンドウの100％の高さに設定できます。

CSS3がオプションでない場合、私は通常、高さ、たとえば500pxを選択し、そのためのグラデーションを作成します。次に、グラデーションは通常、色Aから色Bになるため、下にある背景色を色Bに一致するように設定するだけで、グラデーションはすべてのモニターで同様に機能します。

青から黒へのグラデーションを想定すると、次のようになります。

body {
    /* ensure body always fills viewport */
    min-height: 100%;

    /*gradient fades to black so set underlying BG to black*/
    background: url(/path/to/gradient.gif) repeat-x #000; 
}
}
于 2012-06-05T22:58:06.860 に答える
0

高さを変えて複数の画像を作成し、最も近い画像サイズに動的に一致させることができます。これを行うwindow.resize場合、ユーザーがウィンドウのサイズを変更した場合に画像を更新するためにイベントに関連付ける必要があります。

window.onload = setBackgroundImage;
window.onresize = setBackgroundImage;

function setBackgroundImage() {
    var winH = 500;
    if (document.body && document.body.offsetWidth) {
        winH = document.body.offsetHeight;
    } else if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
        winH = document.documentElement.offsetHeight;
    } else if (window.innerWidth && window.innerHeight) {
        winH = window.innerHeight;
    }

    if (winH > 400) {
        document.body.style.backgroundImage = "url('../image/gradient800px.png')";
    } else if (winH > 800) {
        document.body.style.backgroundImage = "url('../image/gradient1000px.png')";
    } else if (winH > 1000) {
        document.body.style.backgroundImage = "url('../image/gradient1500px.png')";
    } else if (winH > 1500) {
        document.body.style.backgroundImage = "url('../image/gradient2000px.png')";
    } else {
        document.body.style.backgroundImage = "url('../image/gradient400px.png')";
    }
}

解決策はあまりきれいではないと思いますが、うまくいくはずです。

于 2012-06-05T21:49:05.747 に答える
0

たぶんあなたの質問の正しい文脈を理解していないかもしれませんが、これは次のような何かで簡単にそれを行うことができます

#SomeImg.src {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

このページのサイズを変更して、アクションを確認します：http: //css-tricks.com/examples/ImageToBackgroundImage/

于 2012-06-05T21:38:49.733 に答える
0

CSS3 を使用すると、ここでbackground-size: cover説明する他のテクニックがいくつかあります。

于 2012-06-05T21:31:14.133 に答える