CSS将不透明度添加到div的背景颜色而不是内容

我正在尝试使用简单背景颜色和div上的某些文本创建div。我想减少这个div的背景颜色的不透明度，但是当我这样做时，div上文本的不透明度也发生了变化。有没有办法只改变背景颜色的不透明度？CSS将不透明度添加到div的背景颜色而不是内容

.main{ 
 
background-color: red; 
 
    width: 100%; 
 
    height: 200px; 
 
    opacity: 0.5; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

来源

2016-11-17 Harish

'背景-color：rgba（rr，gg，bb，0.5）'。 – 2016-11-17 05:57:53

此问题已被问到[** Here **]（http://stackoverflow.com/questions/16884398/how-to-change-the-background-colours-opacity-in-css）。在SO上发布问题之前，先试着自己修复它，或者至少在Google上搜索它。我在回答这个问题。 –

对不起，我没有看到。我会确保在下一次提问前做好适当的研究。 @MuhammadUsman – Harish

可以使用颜色的alpha信道，如下这是在RGBA

RGBA（255,0,0,0.1）/ * 10％不透明一个第四参数红色/
RGBA（255,0,0,0.4）/ 40％不透明红色/
RGBA（255,0,0,0.7）/ 70％不透明红色/
RGBA（255,0,0，1 ）/完全不透明的红色*/

注：Red将有255作为第一个参数，其他为0，你可以改变从0-1第四参数opacity

.main{ 
 
background-color: rgba(255,0,0,0.7); 
 
    width: 100%; 
 
    height: 200px; 
 
    /*opacity: 0.5;*/ 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

来源

2016-11-17 06:02:32 Aruna

感谢您的明确解释！ – Harish

@Harish我更新了你的代码，你可以执行它来查看效果。 – Aruna

是的，我现在可以看到它。非常感谢:) – Harish

二手RGBA颜色值是RGB颜色值的扩展用alpha通道 - 它指定一个颜色的不透明度。

RGBA站的（红，绿，蓝，alpha）

.main{ 
 
background-color: rgba(255, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

来源

2016-11-17 06:00:19

谢谢。有效！ @Manish – Harish

很高兴帮助你:) –

.main{ 
 
background:rgba(220,0,0,0.2); 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

您可以使用CSS这样。

.main{ 
background:rgba(170,0,0,0.2); 
    width: 100%; 
    height: 200px; 
}

来源

2016-11-17 06:00:56

CSS将不透明度添加到div的背景颜色而不是内容

回答

相关问题