html怎么设置背景透明度
时间:2021-05-28 来源:互联网
今天PHP爱好者为您带来在html中,如果是背景颜色,可以利用rgba()函数或者opacity属性来设置颜色透明度;如果是背景图片,可以利用opacity属性和“filter:opacity(%)”样式来设置图片透明度。希望对大家有所帮助。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、设置背景颜色的透明度--利用rgba()函数或者opacity属性
示例1:
<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>
效果图:
示例2:
<style>
.demo{
width: 280px;
margin: 50px auto;
}
.demo1,.demo2{
width: 120px;
margin: 10px;
float: left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.demo2{
opacity:0.5;
}
</style>
</head>
<body>
<p class="demo">
<p class="demo1">
<p>背景色不透明,文字不透明!</p>
</p>
<p class="demo2">
<p>背景色透明,文字也透明!</p>
</p>
</p>
</body>
效果图:
2、设置背景图片透明度--使用opacity属性和“filter:opacity(%)”样式
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
width: 300px;
background-image: url(img/1.jpg);
background-size: 300px;
}
.p1{
-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
filter: opacity(50%);
}
.p2{
-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<p>
<p>原图:</p>
</p>
<p class="p1">
<p>透明度为50%:</p>
</p>
<p class="p2">
<p>透明度为20%:</p>
</p>
</body>
</html>
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
width: 300px;
background-image: url(img/1.jpg);
background-size: 300px;
}
.p1{
opacity: 0.5;
}
.p2{
opacity: 0.2;
}
</style>
</head>
<body>
<p>
<p>原图:</p>
</p>
<p class="p1">
<p>透透明度为0.5:</p>
</p>
<p class="p2">
<p>透明度为02:</p>
</p>
</body>
</html>
以上就是html怎么设置背景透明度的详细内容,更多请关注php爱好者其它相关文章!
-
使命召唤手游奇喵新世界系列抽奖活动萌动明日将开启 2025-09-05
-
电脑手机快速查看本机IP地址的3种简单方法 新手必备教程 2025-09-05
-
电脑配置查看方法大全 快速了解硬件信息与系统性能 2025-09-05
-
燕云十六声家业玩法再优化-家业原址套用功能已上线 2025-09-05
-
下一站江湖2无妄之灾怎么过-无妄之灾支线通关 2025-09-05
-
鹅鸭杀间谍是干什么的-鹅鸭杀手游间谍玩法解析 2025-09-05