css中如何设置透明度

html-css080

css中如何设置透明度,第1张

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)。