Arka Plan Kaplaması Oluşturmak İçin Sözde Öğeyi Kullanma

Question

Amacım, arka plana sahip bir div içermesi, daha sonra şeffaf bir beyaz kaplama oluşturmak için sahte bir öğe kullanması ve böylece div'in arka planını "aydınlatması". Yine de, "yer paylaşımı", div'in içeriği ALTINDA olmalıdır. Yani, aşağıdaki örnekte:

<div class="container"> 
    <div class="content"> 
     <h1>Hello, World</h1> 
    </div> 
</div> 

.container { 
    background-color: red; 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
.content { 
    background-color: blue; 
    width: 250px; 
} 
.container::before { 
    content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1; 
    background-color: rgba(255, 255, 255, .8); 
} 

.contentdiv "altına" beyaz kaplama, nam .container::before olmamalıdır.

.content numaralı telefondan z-index'u kullanmamayı tercih ederim, ancak tek çözüm bu olabilir.

Bitiş hedefi: Kırmızı metin ve mavi değilken örtülmelidir.

JS keman: http://jsfiddle.net/1c5j9n4x/ sözde elemanı bir z-index sahiptir

Answer 1

, o zaman .content elemanı konumlandırmak ve establish a stacking context bir z-index değer katmak gerekir.

Updated Example

.content { 
    background-color: blue; 
    width: 250px; 
    position: relative; 
    z-index: 1; 
} 

ayırabilseydiniz psödo elemanından z-index kaldırmak ve daha sonra, sadece .content elemanı pozisyon olabilir. Bunu yaparken, hiçbir elemanın z-index'a ihtiyacı yoktur. Bunun nedeni, :before sözde öğenin esasen bir önceki kardeş öğesi olmasıdır. Böylece, sonraki .content öğesi üstte konumlandırılmıştır.

.content { 
    background-color: blue; 
    width: 250px; 
    position: relative; 
} 
.container::before { 
    content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(255, 255, 255, .8); 
}