HTML中如何设置透明度及Opacity属性使用方法解析大全

频道：问答 日期： 浏览：5

在 HTML 中设置透明度有多种方式，以下为你详细介绍：

使用 CSS3 的 opacity 属性

CSS3 的 opacity 属性可以控制网页元素的透明效果，即调整不透明度。其基本语法为：opacity: 不透明度;。“不透明度”以数字表示，范围从 0.0 至 1.0，0.0 表示完全透明，1.0 表示完全不透明，数字越大元素越不透明。参数除数字外，还有 inherit（继承父层属性），不过浏览器支持度较差，不建议使用。

该属性可应用于网页图片、DIV 区块、span 区域、Table 表格等元素，所有新版主流浏览器都支持该属性效果。但需要注意，IE8 及更早版本的 IE 浏览器必须使用替代语法，即利用 filter 属性，写法如「filter:Alpha(opacity=50);」，效果等于「opacity:0.5」。

示例代码如下：

HTML中如何设置透明度及Opacity属性使用方法解析大全

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1 {
      opacity: 0.1;
      background-color: red;
    }
    .div2 {
      opacity: 0.5;
      background-color: green;
    }
    .div3 {
      opacity: 0.8;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="div1">第一个区块，几乎快看不到颜色与文字</div>
  <div class="div2">第二个区块，比第一个清楚</div>
  <div class="div3">第三个区块，文字与背景颜色更明显</div>
</body>
</html>

从上述示例可以看到，一个 DIV 区块内的文字内容与背景颜色都会受到 opacity 属性的不透明度影响。同时，CSS3 的 opacity 透明度属性具有继承性，当对某个对象设置了该属性时，其子集元素也会有透明度效果。

HTML5 的透明设置（rgba 写法）

在 HTML5 中支持透明背景颜色，但只支持 rgba 的写法，不支持 16 进制写法。例如：background - color:rgba(0,152,50,0.7); 表示 70% 的不透明度；background - color:transparent; 支持完全透明。

在 firefox、webkit、khtml 阵营以及 IE9 + 及大于 IE9 的浏览器中可以使用上述 HTML5 设置透明，但此方法在 IE9 以下的浏览器中完全无效。

使用半透明粒子图片

可以使用半透明粒子图片、图案或者渐变半透明 PNG 图片来设置透明度。这种方法兼容性较好，除了 IE6 需要使用插件来修改 PNG 不透明的 bug 外，支持性都不错。设置可以重复，还可以定位，在 H5 中也可以设置大小。不过在网页中追求极致的话，加载图片越少越好。粒子是指透明度匀称的图片裁剪至 5px 5px 以下，这样加载速度会快很多。示例代码：background:url(path/my_png_bg.png) no - repeat center center scroll;

结合透明度和背景颜色或图片

可以同时使用透明度和背景颜色或者背景图片来实现效果。例如：

HTML中如何设置透明度及Opacity属性使用方法解析大全

background - color:rgb(0,152,50);
opacity:0.7;
background:url(path/my_bg.jpg) no - repeat center center scroll;
opacity:0.7;

但要注意，IE6 - IE8 完全不支持 opacity，需要使用 IE 的滤镜，例如使用 alpha 通道来设置不透明度：filter:(opacity = 70) 。

设置字体透明度

在 HTML 中设置字体透明度有两种方法：

利用 color 属性和 rgba() 函数

语法为“字体元素{color: rgba(红色值, 绿色值, 蓝色值, 透明度值);}”。示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <style>
   .p1{color: rgba(0,0, 0, 1);}
   .p2{color: rgba(0, 0, 0, 0.6);}
   .p3{color: rgba(0, 0, 0, 0.4);}
   .p4{color: rgba(0, 0, 0, 0.2);}
  </style>
</head>
<body bgcolor="AFEEEE">
  <p class="p1">测试文本</p>
  <p class="p2">测试文本</p>
  <p class="p3">测试文本</p>
  <p class="p4">测试文本</p>
</body>
</html>

利用 opacity 属性

语法为“字体元素{opacity:透明度值;}”。示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <style>
   .p1{opacity:1;}
   .p2{opacity: 0.6;}
   .p3{opacity:0.4;}
   .p4{opacity:0.2;}
  </style>
</head>
<body bgcolor="00aa7f">
  <p class="p1">测试文本</p>
  <p class="p2">测试文本</p>
  <p class="p3">测试文本</p>
  <p class="p4">测试文本</p>
</body>
</html>