您的位置:首页> 前端教程> CSS3教程
文章导航

CSS opacity 透明度

2019-4-19 22:33| 作者: admin| 查看: 599| 评论: 0|来自: 蚂蚁部落

opacity翻译成汉语具有"不透明性",那么可以推测此属性用于设置不透明度。

设置不透明度其实也就是设置透明度,这个很容易理解。

CSS中设置透明度的属性有很多,简单罗列如下:

(1).CSS RGBA 属性一章节。

(2).CSS HSL() 函数一章节。

(3).CSS HSLA() 函数一章节。

此属性使用非常的简单,但是它有自身的特点,在实际应用中需要注意一下。

因为这个特点在很多时候也是它的去点,下面分步通过代码实例对其进行一下介绍。

语法结构:

[CSS] 纯文本查看 复制代码
opacity: value|inherit;

属性值解析:

(1).value:介于0-1之间的数字,0表示完全透明,1表示完全不透明。

(2).inherit:此属性具有继承性,可以继承父元素的透明度。

特别说明:如果设置的属性值不在0-1之间,那么将就近取在合法范围内的值。

总体上此属性非常简单,如果有些地方感觉不好理解,不用担心,后面会通过代码实例演示。

浏览器支持:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  width:200px;
  height:100px;
  background-color:red;
  opacity:0.2;
}
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/19/223529rrq4iqiwi7isqqz6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码简单分析如下:

(1).设置div的背景颜色为红色。

(2).通过opacity属性设置其透明度为0.2,图片展示的已经很清楚了。

假设上面的设置的属性值不在0-1之间,比如1.2,那么将取距离1.2最近的合法值,也就是1。

大家可以自行测试一下,比较简单,本文不在举例子,下面再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  width:200px;
  height:100px;
  background-color:red;
  opacity:0.2;
  text-align: center;
  line-height:100px;
}
</style>
</head>
<body>
<div class="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/19/223557w356wsw3xv5s5miu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).div中有一段文本"蚂蚁部落"。

(2).背景颜色依然是红色,透明度和前一段代码没有区别,是0.2。

(3).不但div透明了,里面的文字也具有透明效果,甚至都要看不到了。

(4).更多的时候,我们是需要文本不透明,比如带有透明效果的弹出层。

这是此属性的一个特点,大多数时候此特点成为它的一个缺点,好在CSS中还有其他设置透明度的属性。

下面是一段通过RGBA方式设置透明度的代码,可以有效避免上面的现象:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  width:200px;
  height:100px;
  background-color:rgba(255,0,0,0.2);
  text-align: center;
  line-height:100px;
}
</style>
</head>
<body>
<div class="ant">蚂蚁部落</div>
</body>
</html>

可以看到背景虽然透明了,但是里面的内容保持最初的透明度。

rgba函数具有四个参数,前三个是RGB颜色值,最后一个参数用于规定透明度。

更多内容可以参阅CSS RGBA 属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部