55 

$("#toggle").click(function(){
    $("html").toggleClass("bg");
});
html.bg {
    background: blue;
}

body {
    background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="bg">
<head>
</head>

<body>
    Test
    <br>
    <button id="toggle">Toggle HTML background</button>
</body>
</html>

CSS の背景を に適用すると、ページ全体が占有されることがわかりましたbody(の実際の高さや幅に関係なくbody)。

ただし、 と の両方に CSS 背景を適用するhtmlとbody、 の背景はbody ページ全体を占めません。

この不一致は予想される動作ですか?

2 つのフルスクリーンの背景 (たとえば、背景色と半透明の画像) を重ね合わせるにはどうすればよいでしょうか?

4

2 に答える 2

64

これは正しい動作です。1 標準モードではbody、、およびhtmlは、ビューポートの高さ全体をすぐには占有しません。ただし、後者に背景のみを適用すると、そのように見えます。実際、独自の背景を指定しない場合、html要素は の背景を取り、これをキャンバスに渡します。bodyhtml

ルート要素の背景はキャンバスの背景になり、その背景描画領域はキャンバス全体をカバーするように拡張されます。(つまり、背景の配置領域はルート要素として決定されます。) ルートの 'background-color' 値が 'transparent' の場合、キャンバスの背景色は UA 依存です。ルート要素はこの背景を再び描画しません。つまり、その背景の使用値は透明です。

ルート要素が HTMLHTML要素または XHTMLhtml要素であるドキュメントの場合: ルート要素の 'background-image' の計算値が 'none' であり、'background-color' が 'transparent' である場合、ユーザー エージェントは代わりに、その要素の最初の HTMLBODYまたは XHTMLbody子要素から計算された背景プロパティの値。そのBODY要素の背景プロパティの使用値は初期値であり、伝達された値はルート要素で指定されたかのように扱われます。BODYHTML ドキュメントの作成者は、要素ではなく要素のキャンバス背景を指定することをお勧めしますHTML。

ただし、 2 つの要素に依存することなく、1 つの要素 ( または のいずれhtmlか)の背景色の上に任意の背景画像を重ねることができます。単純に、省略形プロパティでそれらを使用するか、結合するだけです。bodybackground-colorbackground-imagebackground

body {
    background: #ddd url(background.png) center top no-repeat;
}

2 つの背景画像を組み合わせたい場合は、複数の背景に依存する必要があります。これを行うのに主に 2 日間あります。

  • CSS2 では、両方の要素のスタイリングが便利な場合があります。背景画像を設定し、最初の画像の上に重ねるhtml別の画像を設定するだけです。bodyディスプレイの背景画像がビューポートの高さ全体に表示されるようにするには、 と をそれぞれbody適用する必要があります。heightmin-height

    html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

    ちなみに、heightとmin-heighttohtmlとbodyそれぞれを指定しなければならない理由は、どちらの要素も固有の高さを持たないためです。どちらもheight: autoデフォルトです。これは高さが 100% のビューポートであるため、ビューポートから取得され、コンテンツのスクロールを可能にする最小値としてheight: 100%適用されます。body

  • CSS3 では構文が拡張され、1 つのプロパティで複数の背景値を宣言できるようになり、複数の要素に背景を適用する (またはheight/を調整するmin-height)必要がなくなりました。

    body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;
}

    唯一の注意点は、単一の複数レイヤーの背景では、一番下のレイヤーのみが背景色を持つことができるということです。この例では、transparent値が上位レイヤーから欠落していることがわかります。

    心配する必要はありません。背景値を伝播する上記の動作は、多層背景を使用する場合でもまったく同じように機能します。

ただし、古いブラウザーをサポートする必要がある場合は、IE7 までサポートされている CSS2 メソッドを使用する必要があります。

この他の回答の下にある私のコメントは、添付のfiddleを使用して、代わりにパディングされているように見えても、実際にはデフォルトのマージンからどのようbodyにオフセットされるかを説明しています。html

1これは 、背景属性をビューポート全体に適用させるHTMLおよび属性の設定にそのルーツがある可能性があります。詳細はこちら。backgroundbgcolorbody

于 2012-06-08T11:01:35.500 に答える
8

これを読むことをお勧めします：

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

基本的にbackground、html要素に a がない場合、body backgroundがページを覆います。要素にがある場合、 は他の要素と同じように動作しますbackground。htmlbody background

于 2018-01-30T20:19:56.677 に答える