CSS设置背景色透明字体不透明

CSS设置背景色透明字体不透明

最近在学习.NET web应用开发,学习HTML静态页面时想做一个半透明的背景色,像以下效果:
CSS设置背景色透明字体不透明_第1张图片
发现用opacity设置背景颜色透明度时连同其div内所有图片及其字体颜色都变透明了。
opacity设置半透明CSS代码如下:

.bodytop{
    width:100%;
    height:100px;
    text-align:center;
    background-color:white;
    opacity:0.5;
    margin-bottom:20px;
}

效果如下:
CSS设置背景色透明字体不透明_第2张图片
仔细看看发现opacity设置透明度不只针对背景设置,而是将整个div内所有元素都设置为统一的透明度了。
后来想尝试将内部字体颜色再重新设置为opacity:1,发觉字体的透明度仍然不变。我猜测应该是子div是以上一级div作为根据再进行百分比透明化,即上一级div设置opacity为0.5,子div就算设置opacity为1,也不过是opacity为0.5的效果。且opacity取值不过在0~1之间(不了解opacity偷偷试了试参数为2)。
既然这样,那怎么实现背景透明而字体不透明效果呢,考虑opacity是针对整个div设置的,那是否存在单一对背景颜色而独立设置的方法呢。
百度之后,发现有个设置rgb设置背景色方法,rgba(x,y,z,a),其中x、y、z分别为三原色参数,取值为0-255,a取值为0-1,表示背景色透明度,0位完全透明,1为完全不透明。习此方法再去试试,应用代码为:

.bodytop{
    width:100%;
    height:100px;
    text-align:center;
    background-color:rgba(255,255,255,0.5);
    margin-bottom:20px;
}

最终达成理想效果。
这只是一种解决方案,并且有其局限性,以后慢慢学习再作补充。

你可能感兴趣的:(前端学习,css)