HTML文本不會出現白色

我有HTML文本，用css白色。我也有不透明度設置爲0.5，但不應該改變字體顏色。它應該保持白色。HTML文本不會出現白色

有沒有解決這個問題，而不去除不透明度或背景顏色？

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>

來源

2017-06-04 Pleinair

不透明度會改變文本的不透明度包含的，如果你不希望這樣的文本是透明的，你將不得不把它放在一個單獨的標籤。編輯：由@Chiller回答良好的解答 – Polymer

如果一個元素上使用透明度會影響到它裏面的所有物品，可以使用不透明的背景色只

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>

來源

2017-06-04 12:55:23 Chiller

opacity屬性影響在他的所有兒童。

可以使用的以下屬性：

1）背景色：HSLA（0100％，50％，0.5）;

2）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: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>

來源

2017-06-04 12:56:58 Ehsan

HTML文本不會出現白色

回答

相關問題