テキストの下に別の背景レイヤーを適用する方法

Question

CSSコミュニティ、この質問が表示されたら、私はそれを閉じることができます。

ここに問題があります。背景を持つ要素があり、最初の要素の上に別の背景を追加したいとします。要素のテキストは静的で、背景の上に表示されます。

これを実行する方法はありますかは、でのみですか？私は他の要素などを動的に追加できることを知っていますが、スタイルルールだけでこれを行う方法を探しています。

このスニペットを実行して、私の心に留めてください。理想的には、私はこのテキストを自分の背景との間に置く方法を持っています。:before

div { 
 
    padding: 20px; 
 
    background: #c8e289; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    top: 0; 
 
    right: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div>Text Barely Visible</div>

Answer 1

単に擬似要素に要素にz-index: 0を追加し、z-index: -1。

div { 
 
    padding: 20px; 
 
    background: #c8e289; 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
div::before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    top: 0; 
 
    right: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<div>Text Barely Visible</div>

---

それとも、マルチバックグラウンドルート行くことができます：

div { 
 
    padding: 20px; 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 50%, transparent 50%), #c8e289; 
 
    position: relative; 
 
}

<div>Text Barely Visible</div>

Answer 2

擬似要素を使って、両方の背景を定義し、負のzインデックスを持つ親の後ろに置きます。

div { 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    content: ''; 
 
} 
 
div:after { 
 
    background: #c8e289; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -2; 
 
} 
 
div:before { 
 
    background: rgba(255, 255, 255, 0.6); 
 
    top: 0; 
 
    right: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<div>Text Barely Visible</div>

Answer 3

カンマで区切り、複数のバックグラウンドを使用することができます。または、親要素の背後に擬似要素をz-index: -1で送信することができます（親要素に宣言されたZ-索引がない場合にのみ機能します）。

Answer 4

はい、ちょうどz-インデックスを混乱させる必要があります！

親コンテナを次の位置に設定できます。 z-インデックス：1など。その後

、あなたは他のバックグラウンドとして機能する子を持っている、などのpタグ、位置として、それ自身のタグで、その後最終的には絶対に2

のzインデックスを使用してテキストの折り返しを、これを配置しますそれは3

のzインデックスを持つ相対ここでは、コードの例です：

<div class="parent-bg"> 
    <div class="parent-bg__child-bg"></div> 
    <p class="parent-bg__child-text">Text</p> 
</div> 

.parent-bg { 
    background-color: red; 
    position: relative; 
    z-index: 1; 
    width: 20rem; 
    height: 20rem; 
} 

.parent-bg__child-bg { 
    background-color: rgba(255, 255, 255, .6); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
} 

.parent-bg__child-text { 
    position: relative; 
    z-index: 3; 
    color: black; 
} 

は、ここでは絶対にCOR行っているペンhttp://codepen.io/anon/pen/ggJLoa

Answer 5

ですあなたはz-indexを追加する必要があります。

div { 
 
    padding: 20px; 
 
    background: #c8e289; 
 
    position: relative; 
 
    z-index: -2; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    top: 0; 
 
    right: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    z-index: -2; 
 
}

<div>text is visible here</div>