0

コードで：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
    position: absolute;
    top:500px;  
    width:400px;
    border:1px solid green;
} 

.parent:before {
    z-index:-1;
    content:'';
    position:absolute;

    opacity:0.5;
    width:400px;
    height:200px;
    background-image:url('wallpaper324845.jpg');
    border:1px solid red;
}

.child {
    Color:black;
    border:1px solid black;
}
</style>
</head>

<body>
<div class="parent">
    <div class="child">Hello I am child</div>
</div>
</body>

</html>

このスレッドで説明されているように、透明な背景を作成しようとしています: How to set opacity in parent div and not impact in child div? .

4番目の回答のコードを見てください。これはどのように機能しますか? と の使用に混乱してい.parentます.parent:before。.parent:beforeこれにより、すべての親要素の前に要素が作成されると思います。これがどのように機能するのか本当に混乱していますか？

4

4 に答える 4

1

作成者は、:before および :after 疑似要素を使用して、生成されたコンテンツのスタイルと場所を指定します。名前が示すように、:before および :after 擬似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。「コンテンツ」プロパティは、これらの疑似要素と組み合わせて、挿入されるものを指定します。

以下は、HTML をルートとするドキュメント ツリーです。

HTML
.HEAD    
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI

たとえば、次のルールは、「class」属性の値が「note」であるすべての P 要素のコンテンツの前に、文字列「Note:」を挿入します。

p.note:before { content: "Note: " }

要素によって生成される書式設定オブジェクト (ボックスなど) には、生成されたコンテンツが含まれます。たとえば、上記のスタイル シートを次のように変更します。

p.note:before { content: "Note: " }
p.note        { border: solid green }

最初の文字列を含む段落全体の周りに、実線の緑色の境界線がレンダリングされます。

:before および :after 疑似要素は、関連付けられているドキュメント ツリー内の要素から継承可能なプロパティを継承します。

たとえば、次のルールでは、すべての Q 要素の前に開き引用符が挿入されます。引用符の色は赤になりますが、フォントは Q 要素の残りのフォントと同じになります。

q:before {
  content: open-quote;
  color: red
}

:before または :after 疑似要素宣言では、継承されないプロパティは初期値を取ります。

したがって、たとえば、'display' プロパティの初期値が 'inline' であるため、前の例の引用はインライン ボックスとして挿入されます (つまり、要素の初期テキスト コンテンツと同じ行に)。次の例では、挿入されたテキストがブロックになるように、'display' プロパティを明示的に 'block' に設定します。

body:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

:before および :after 擬似要素要素は、関連する要素のすぐ内側に挿入された実際の要素であるかのように、実行ボックスなどの他のボックスと相互作用します。

たとえば、次のドキュメント フラグメントとスタイル シート:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...次のドキュメント フラグメントとスタイル シートとまったく同じ方法でレンダリングされます。

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

同様に、次のドキュメント フラグメントとスタイル シート:

<h2> Header </h2>     h2 { display: run-in; }
                      h2:after { display: block; content: 'Thing'; }
<p> Text </p>

...次のドキュメント フラグメントとスタイル シートとまったく同じ方法でレンダリングされます。

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }
<p> Text </p>
于 2014-02-18T09:10:03.887 に答える