在html中，如果是背景颜色，可以利用rgba()函数或者opacity属性来设置颜色透明度；如果是背景图片，可以利用opacity属性和“filter:opacity(%)”样式来设置图片透明度。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、设置背景颜色的透明度–利用rgba()函数或者opacity属性
示例1：
#p1 {background-color:rgb(255,0,0,0.3);}#p2 {background-color:rgb(0,255,0,0.3);}#p3 {background-color:rgb(0,0,255,0.3);}#p4 {background-color:rgb(192,192,192,0.3);}#p5 {background-color:rgb(255,255,0,0.3);}#p6 {background-color:rgb(255,0,255,0.3);}RGB 颜色，并使用透明度:
立即学习“前端免费学习笔记（深入）”；
红色
绿色
蓝色
灰色
黄色
樱桃色
效果图：
示例2：
.demo{width: 280px;height: 140px;margin: 50px auto;}.demo1,.demo2{width: 120px;height: 120px;margin: 10px;float: left;background:#2DC4CB;}.demo1{opacity:1;}.demo2{opacity:0.5;}背景色不透明，文字不透明！
背景色透明，文字也透明！
效果图：
2、设置背景图片透明度–使用opacity属性和“filter:opacity(%)”样式
示例1：
div{width: 300px;height: 200px;background-image: url(img/1.jpg);background-size: 300px;}.div1{-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */filter: opacity(50%);}.div2{-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */filter: opacity(20%);}原图：
透明度为50%：
透明度为20%：
示例2：
div{width: 300px;height: 200px;background-image: url(img/1.jpg);background-size: 300px;}.div1{opacity: 0.5;}.div2{opacity: 0.2;}原图：
透透明度为0.5：
透明度为02：
（学习视频分享：css视频教程、《html视频教程》）
以上就是html怎么设置背景透明度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1549981.html
微信扫一扫 
支付宝扫一扫 
