CSS 设置 div 背景透明有两种方法: 第一种使用 opacity:0~1, 这个方法有个缺点, 就是内容也会跟着透明; 第二种方法就是 rgba(0,0,0,0~1), 使用这个方法就只会设置 div 背景透明, 而不会影响到 div 里的内容.
一, CSS rgba() 设置颜色透明度
语法:
rgba(R,G,B,A);
RGBA 是代表 Red(红色) Green(绿色) Blue(蓝色) 和 Alpha(不透明度) 三个单词的缩写. RGBA 颜色值是 RGB 颜色值的扩展, 带有一个 alpha 通道 - 它规定了对象的不透明度.
rgba() 里的值的介绍:
R: 红色值. 正整数 (0~255)
G: 绿色值. 正整数 (0~255)
B: 蓝色值. 正整数 (0~255)
A: 透明度. 取值 0~1 之间
rgba() 只是单纯的可以设置颜色透明度, 这样在页面的布局中有很多应用. 比如说: 让背景出现透明效果, 但上面的文字不透明.
代码实例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- rgba()
- </title>
- <style>
- .demo{ width: 350px; height: 300px; margin: 50px auto; } .demo *{ width:
- 120px; height: 120px; margin: 10px; float: left; } .demo1{ background:rgba(255,0,0,1);
- } .demo2{ background:rgba(255,0,0,0.5); }
- </style>
- </head>
- <body>
- <div class="demo">
- <div class="demo1">
- 背景色不透明, 文字不透明!
- </div>
- <div class="demo2">
- 背景色半透明, 文字不透明!
- </div>
- </div>
- </body>
- </HTML>
二, CSS opacity 属性设置背景透明度
语法:
opacity: value ;
value : 指定不透明度, 从 0.0(完全透明) 到 1.0(完全不透明).
opacity 属性具有继承性, 会使容器中的所有元素都具有透明度;
代码实例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- opacity 属性
- </title>
- <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>
- </HTML>
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14063.html