css 背景透明
原创
今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。
css实现透明效果的方法一般有以下3种方式，以下是不透明度都为50%的写法
- css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5
- css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.5)
- IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=50)
本文讨论上面两种方法，IE下的情况也可使用但不做讲解。
（1）opacity <无法实现背景透明，文字不透明效果>设置opacity元素的所有后代都会一起具有透明性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
.trans{
padding: 25px;
background-color:#000000;
opacity: 0.2;
}
.trans p{
color: red;
}
</style>
</head>
<body>
<div class="trans">
<p>测试文字</p>
</div>
</html>（2）rgba rgba(0,0,0,0.2) 颜色的rgb三色值，和透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文字</title>
<style>
.trans{
padding: 25px;
background-color: rgba(0,0,0,0.2); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.trans p{
color: red;
}
</style>
</head>
<body>
<div class="trans">
<p>测试文字</p>
</div>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
