HTMLテキストが白く表示されない

Question

HTMLテキストがCSSで白く塗られています。不透明度は0.5に設定されていますが、フォントの色は変えてはいけません。それは白いままでなければならない。

不透明度または背景色を削除せずにこれに対する修正がありますか？

body { 
 
    background: green; 
 
} 
 

 
.second-b { 
 
    background-image: url(images/town.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.color-box { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: red; 
 
    opacity: 0.5; 
 
    line-height: 300px; 
 
    text-align: center; 
 
} 
 

 
.color-box-content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    color: white; 
 
    font-size: 22px; 
 
}

<div class="second-b"> 
 
    <div class="color-box"> 
 
    <div class="color-box-content">Lorem ipsum</div> 
 
    </div> 
 
</div>

Answer 1

あなたが要素の上に不透明度を使用している場合、それはその中のすべての項目に影響します、 あなたは背景色のみ

background-color: rgba(255, 0, 0, 0.5); 

を参照してくださいコードの上に不透明度を使用することができますスニペット：

body { 
 
    background: green; 
 
} 
 

 
.second-b { 
 
    background-image: url(images/town.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.color-box { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
    line-height: 300px; 
 
    text-align: center; 
 
} 
 

 
.color-box-content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    color: white; 
 
    font-size: 22px; 
 
}

<div class="second-b"> 
 
    <div class="color-box"> 
 
    <div class="color-box-content">Lorem ipsum</div> 
 
    </div> 
 
</div>

Answer 2

opacityプロパティは、すべての彼の子供たちに影響を与えます。

次の属性を使用することができます。

1）背景色：HSLA（0100パーセント、50％、0.5）。

2）背景色：rgba（255,0,0,0.5）;

body{ 
 
    background: green; 
 
} 
 

 
.second-b{ 
 
    background-image: url(images/town.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.color-box{ 
 
    width:100%; 
 
    height:300px; 
 
    background-color:hsla(0,100%,50%,0.5); 
 
    line-height: 300px; 
 
    text-align: center; 
 
} 
 

 
.color-box-content{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    color:white; 
 
    font-size:22px; 
 
}

<div class="second-b"> 
 
    <div class="color-box"> 
 
     <div class="color-box-content">Lorem ipsum</div> 
 
    </div> 
 
</div>