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文本不会出现白色

回答

相关问题