1、创建一个html文件。
2、在html文件找到一个<body>标签,在这个标签里创建一个<div>标签并添加一个类,在这把这个类设置为:rgba。
代码:<div class="rgba"></div>
3、为div添加样式。在<title>标签后面创建一个<style>,在<style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。
代码:
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5)
height: 200px
}
</style>
4、保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。
5、所有代码。可以把所有代码复制到新建的html文件上,保存好后使用浏览器打开借口看到效果。
所有代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置背景透明</title>
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5)
height: 200px
}
</style>
</head>
<body>
<div class="rgba"></div>
</body>
</html>
有很多中方法,如果是全透明,那么最简单的方法(以默认模板为例子)是找到:.modbox 模块内容区{padding:10px 10px 0 10pxbackground-color:#FFFFFF}
.modtl 模块左上角背景{background:url(temp1/ptitl.gif) no-repeat top leftline-height:1px}
.modtc 模块中上背景{background:url(temp1/ptitc.gif) repeat-x}
.modtr 模块右上角背景{background:url(temp1/ptitr.gif) no-repeat top rightline-height:1px}
.modbl 模块左下角背景{background-color:#FFFFFFline-height:1px}
.modbc 模块中下背景{background-color:#FFFFFFline-height:1px}
.modbr 模块右下角背景{background-color:#FFFFFFline-height:1px}
这几行代码(开头的相同即可以,大括号里的可能有点不相同),把background-color:#FFFFFF/*背景色*/ 和 background:url(temp1/ptitr.gif) /*背景图片*/的#FFFFFF和括号里的图片地址去掉,这样,所有的模块就变成了透明的,因为没有背景色也没有背景图片.
如果还不透明的话,那就把
.stage空间主体{background-color:#FFFFFF}的像#FFFFFF一类的颜色代码和像background:url()之类的括号里面的图片地址去掉.
因为CSS是分层的,模块的代码在主体代码的上面,两层是叠加在一起的,所以说这两层的背景色和背景图片的代码都要去掉,那么才会显示出最下面一层的body的背景色和背景图片.这种办法是最简单的一种了.还有不少的办法.
CSS实现文字透明效果可以使用Opacity 属性即可满足。
CSS opacity 属性相关介绍和案例:
浏览器支持:所有浏览器都支持 opacity 属性。
定义和用法
A、opacity 属性设置元素的不透明级别。
B、默认值:1。
C、继承性:no。
D、版本:CSS3。
E、JavaScript 语法:object.style.opacity=0.5。
语法:opacity: value|inherit。
A、value:规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
B、应该从父元素继承 opacity 属性的值。
实例:设置 div 元素的不透明级别。
div{opacity:0.5} //透明度为0.5,半透明。注释:
A、IE8 以及更早的版本支持替代的 filter 属性。例如filter:Alpha(opacity=50)。