本文摘自PHP中文网,作者青灯夜游,侵删。
在html中,如果是背景颜色,可以利用rgba()函数或者opacity属性来设置颜色透明度;如果是背景图片,可以利用opacity属性和“filter:opacity(%)”样式来设置图片透明度。
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/202105/17/2021051716392417138.jpg)
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、设置背景颜色的透明度--利用rgba()函数或者opacity属性
示例1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < style >
#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);}
</ style >
</ head >
< body >
< p >RGB 颜色,并使用透明度:</ p >
< p id = "p1" >红色</ p >
< p id = "p2" >绿色</ p >
< p id = "p3" >蓝色</ p >
< p id = "p4" >灰色</ p >
< p id = "p5" >黄色</ p >
< p id = "p6" >樱桃色</ p >
</ body >
|
效果图:
![1621240278972864.png 1.png](http://ypimg.muzhuangnet.com/Collect/csharp/upload/image/353/289/508/1621240278972864.png)
示例2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < style >
.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;
}
</ style >
</ head >
< body >
< div class = "demo" >
< div class = "demo1" >
< p >背景色不透明,文字不透明!</ p >
</ div >
< div class = "demo2" >
< p >背景色透明,文字也透明!</ p >
</ div >
</ div >
</ body >
|
效果图:
![1621240334506263.png 2.png](http://ypimg.muzhuangnet.com/Collect/csharp/upload/image/212/845/866/1621240334506263.png)
2、设置背景图片透明度--使用opacity属性和“filter:opacity(%)”样式
阅读剩余部分
相关阅读 >>
jquery实现带弹窗和次数的转盘抽奖(代码)
Html表单有哪些标记
在Html页面中引入外部Html文件的解决方案
Html的表单组件如何使用
Html<p>标签是什么元素?关于Html p标签的定义和作用详解
Html p标签怎么换行?Html p标签添加br换行标签的应用
Html怎么设置字体颜色?Html字体颜色设置的三种方法
Html中的form标签有什么作用?Html form标签的用法解释
怎么调超链接的位置Html
Html !doctype标签怎么用
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html怎么设置背景透明度