css半透明颜色代码（如何用css实现半透明遮罩层效果）
本文目录
- 如何用css实现半透明遮罩层效果
- CSS怎么设置让背景颜色透明，而文字不透明
- 请问如何用css实现彩色半透明效果
- css设置背景半透明
- css中，如何设置前景色的透明度
- css设置透明颜色
- CSS如何定义DIV背景半透明颜色
如何用css实现半透明遮罩层效果
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
.opacity{
opacity:0.3; filter: alpha(opacity=30); background-color:#000; }
2
、要覆盖整个可视区域通常的做法是:
html,body{ height:100%}
.mask{height:100%;width:100%;}
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position:fixed;
来解决这个问题
完整的代码:
《div class=“mask opacity“》《/div》
html,body{ height:100%; margin:0; padding:0}
.mask{height:100%;
width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }
.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000;
}
给你一个例子：
《!DOCTYPE html》《html》
《head》
《meta
charset=“gb2312“ /》
《title》背景半透明覆盖整个可视区域《/title》
《style》
html,body{ height:100%; margin:0; padding:0;
font-size:14px;}
p{ line-height:18px;}
.mask{height:100%; width:100%;
position:fixed; _position:absolute; top:0; z-index:1000; }
.opacity{
opacity:0.3; filter: alpha(opacity=30); background-color:#000; }
.content{height:600px; width:800px; overflow:auto; border:2px solid #ccc;
background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px auto
auto -400px; z-index:1001; word-wrap: break-word; padding:3px;}
.ph{
height:1000px;}
《/style》
《/head》
《body》
《p
class=“ph“》place holder height:1000px;《/p》
《div class=“mask
opacity“》《/div》
《div class=“content“》
《h1》背景半透明覆盖整个可视区域《/h1》
《p》
这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。
《/p》
《p》html代码很简单 《 d i v class=“mask opacity“》《 / d i
v 》 《/p》
《p》 1 、半透明效果可以使用 css3 中的 opacity
属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
《code》.opacity{ opacity:0.3;
filter: alpha(opacity=30); background-color:#000; }《/code》 《/p》
《p》 2 、要覆盖整个可视区域通常的做法是: 《br/》
《code》 html,body{
height:100%} 《/code》 《br/》
《code》.mask{height:100%;width:100%;}《/code》 《br/》
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用《code》position:fixed;
《/code》来解决这个问题 《/p》
《p》
《strong》完整的代码《/strong》:
《pre》
html,body{ height:100%;
margin:0; padding:0}
.mask{height:100%; width:100%; position:fixed;
_position:absolute; top:0; z-index:1000; }
.opacity{ opacity:0.3; filter:
alpha(opacity=30); background-color:#000; }
《/pre》
《/p》
《p》 《strong》参考资料：《/strong》
《a href=“http://zhidao.baidu.com“》背景半透明最佳实践《/a》
《a href=“http://baidu.com“》垂直居中的几种实现方法《/a》
《a href=“http://tieba.baidu.com“》DIV高度100%《/a》
《/p》
《/div》
《/body》
《/html》
CSS怎么设置让背景颜色透明，而文字不透明
1、首先我们新建一个html文件，添加一个DIV，设置宽度和高度，以及背景色填充为红色。
2、然后在父级DIV中插入一个子DIV，定义它的宽高，以及背景色。
3、然后我们添加一个透明度的代码（opacity:0.6）。
4、在图层的上方，有个不透明度，我们把PS中图层不透明度设置为60%。
5、把刚才的背景色和不透明度代码删除，换个代码【background-color:rgba(255,255,255,0.6);】。
6、其中255,255,255就是PS中的拾色器里的数值。
请问如何用css实现彩色半透明效果
@……
我不知道你写的是什么代码，但我试了一下，可以啊。
《body》
《div style=“background-color:#f00;width:300px;height:300px;“》
《div style=“width:100px;height:100px;filter:alpha(opacity=70);opacity:0.7;background-color:#0f0“》
《/div》《/div》
《/body》
PS:
因为为了方便，所以用行内式写CSS代码。
以上……
css设置背景半透明
首先，用大家比较熟悉的CSS属性opacity来改变div的背景颜色。
描述：
外面大的div背景颜色为黄色，里面小的div的背景颜色为红色，现在我们需要设置大的div的背景颜色变成半透明状态，我们将opacity的属性值设为0.5，代码如下：
HTML部分：
1
2
3
我是内容
CSS部分：
1
2
3
4
5
6
7
8
9
10
11
.aa{
width: 250px;
height: 250px;
background: yellow;
opacity: 0.5;
}
.bb{
width: 150px;
height: 150px;
background: red;
}
背景颜色的确变成了半透明，但是里面小div的背景以及文字都变成半透明了，这可能不是我们想要的效果，所以我们一般不使用这种方法。当然了，如果在页面布局时，你希望div里面所有的都变透明，就用opacity。
接下来我们用另一种方法，background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
HTM部分一样，只需要将opacity换成rgba即可。
代码如下：
1
2
3
4
5
6
7
8
9
10
.aa{
width: 250px;
height: 250px;
background-color: rgba(255,255,0,0.5);
}
.bb{
width: 150px;
height: 150px;
background: red;
}
大的div透明度改变以后，对里面的背景和文字都没有任何影响。所以我们一般用background-color:rgba(0,0,0,0~1)来设置背景颜色透明。
css中，如何设置前景色的透明度
1、准备好初始化的代码
《html》
《head》
《meta charset=“utf-8“/》
《style》
《/style》
《/head》
《body》
《div》《/div》
《/body》
《/html》
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为
4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);
5、运行结果为
透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。
注意：设置背景颜色时哪里应该写成rgba。
css设置透明颜色
css rgba()设置颜色透明度
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
rgba（)里的值的介绍：
R：红色值。正整数 （0~255）
G：绿色值。正整数 （0~255）
B：蓝色值。正整数（0~255）
A：透明度。取值0~1之间
rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。
CSS如何定义DIV背景半透明颜色
“长城郭靖”回答的是错的，他答的是让整个元素半透明
只让背景半透明只有一个办法，就是用rgba颜色，代码如下
解释：这是黑色半透明的代码
前三个值表示颜色的red,green,blue值
最后一个表示alpha值，就是透明度值，不透明为1
（支持IE8+以及所有现代浏览器）
还是不懂的话，可以参考 百度百科 “rgba”词条 和 “CSS 颜色值”词条
更多文章：
majority of（the majority of 和 a majority of的区别以及用法例句）
2026年10月11日 07:40
2026年10月11日 07:20
2026年10月11日 06:30
2026年10月11日 06:20
2026年10月11日 05:40
another time（another time和other time的区别）
2026年10月11日 05:00
2026年10月11日 04:50
2026年10月11日 03:00
2026年10月11日 02:40
2026年10月11日 02:20
