2

私の HTML には現在、ビューポートに合わせて伸びる背景画像が含まれています。divその中に、ビューポートの高さと幅に合わせて伸び、50% の不透明度で背景色が黒のを配置する予定です。

div幅と高さを 100% に設定しました。が伸びていないのですが、そのdiv理由がわかりません。

HTML:

<!DOCTYPE HTML>
<html lang="en"> 
    <head>
        <title>Tester</title>   
        <meta charset="UTF-8"/> 
        <style type="text/css"> 
            html { 
                background: url(http://cjpstudio.com/wp-content/uploads/2011/12/cityrock1.jpg) no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            #background-color   {
                width: 100%;
                height: 100%;
                background-color: #000000;
            }       
        </style>
    </head> 
    <body>  
        <div id="background-color"> 
        </div>  
    </body>
4

4 に答える 4

4

代わりにwidth、height代わりに使用できますposition：

#background-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}

これにより、ユーザーが要素を移動するページをスクロールできるようになるか、または可能になる可能性があります。#background-colorユーザーが画像を移動する可能性を回避するために、position: fixed代わりに使用してください。

#background-color要素に祖先要素があり、この要素position以外の要素がある場合、ページ/ドキュメント（の場合）やビューポート（の場合）staticではなく、その祖先を基準にして配置されます。position: absoluteposition: fixed

これがあなたのサイトのコンテンツとのユーザーの相互作用を防ぐ試みであるならば、それはもちろん失敗する運命にあります。

以下のOPからのコメントに応じて編集：

理由を説明できますか？divウィンドウを埋めるための指示をどのように/どのように取得していたのかわかりません。でも完全に理解できpositionたと思いました…そうではないと思います。とにかく、説明は本当に役に立ちます。

確かに、それはあまり説明ではありませんが、これは単に要素をまたはのいずれabsoluteかfixedで配置し、次にその軸をビューポートの側面に対して、から0px、側面から、側面から、およびから配置することによって機能します。top0pxleft0pxright0pxbottom

于 2012-07-02T21:09:54.900 に答える
2

html タグと body タグの両方に 100% の幅と (最小) 高さを設定します。また、黒の代わりに @black に注意してください。

そして、完全なページブロックが必要な場合。要素を100％の幅と高さで固定して設定する方がおそらく良いでしょう（他のコメントで述べたように）

Fixed は、要素を window 要素に一致させるため、より適切に機能します。Absolute は、相対位置、絶対位置、または固定位置のいずれかで要素を最も近い祖先に一致させます。IE7 から固定でサポートされています。

于 2012-07-02T21:12:23.480 に答える
0

その div にはコンテンツがないため、背景は表示されません。コンテンツがなくてもdivでページをカバーしたい場合、これは私にとってはうまくいくようでした

#background-color   {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            background-color: @black;
            }

うまくいけば、これはあなたのために働くでしょう:)

于 2012-07-02T21:12:57.097 に答える