标题可能不是很专业,只要你有一点前端基础的应该能看懂意思,昨天没休息好,今天写项目有点飘,总是写了尾巴忘了头,年轻少熬夜*-*
如标题今天记录三个Css属性
opacity rgb rgba
下面来讲解一下久伴遇到的坑,由于久伴是前端小白,项目经验不多,在写一个demo的时候遇到一个问题,如图所示
父div透明了,但是父div中的子div也继承了opacity透明属性,这可不是久伴要的效果
解决方案
父div使用rgba()Css属性即可解决这个问题,因为rgba()属性用在父div上面不会被子div继承
opacity rab rgba属性解释
1,opacity设置颜色透明度
2,rgb(,,,)设置颜色r代表red,g代表green,b代表blue(取值在0-255之间)
3,rgba(,,,,)设置颜色r代表red,g代表green,b代表blue a代表opacity设置背景透明度(取值在0-1之间)
其实用opacity也可以设置背景透明文字不透明,这个需要使用定位(如果用定位请考虑好大局,不然代码多了你很难受的)
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ background: red; } .diva{ width: 200px; height: 200px; background: #ffffff; opacity: 0.5; } .divb{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; text-align: center; line-height: 200px; } </style> </head> <body> <div class="diva"> </div> <div class="divb"> 我是文字 </div> </body> </html>
使用场景
opacity可用于图片遮罩,rgba用于背景透明文字不透明
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

不错的分享,谢谢