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

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

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

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

效果如下:
背景色和字体颜色均透明化
仔细看看发现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;
}

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

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值