苏飞论坛

标题: 【前端丨学习笔记】设置不透明度的几种方法 [打印本页]

作者: Amy    时间: 2018-12-23 21:21
标题: 【前端丨学习笔记】设置不透明度的几种方法
【前端丨习笔记】设置元素不透明度的几种方法

【零基础学习web前端】教程目录导航
http://www.sufeinet.com/thread-24027-1-1.html


设置元素的不透明度有多种方法,下面是一些常用方法的总结,希望对大家有用。

方法1:opacity
opacity是除了IE浏览器外,所有浏览器都支持的。
opacity的属性值可以精确到小数点后两位,如.01,.23。一般情况下,精确到一位就可以了。
opacity的值越小越接近透明
IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。
[CSS] 纯文本查看 复制代码
background-color:red;
opacity:.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */

方法2:JQuery改变元素的透明度
这个方法所有浏览器都兼容
[JavaScript] 纯文本查看 复制代码
$(“#demo”).css({opacity:.4})

上述语法是设置一个元素为40%不透明(或60%透明)。
总结:设置opacity:1是将使元素不透明,而设置opacity:0将使得元素完全不可见。
所以要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。
您也可以使用一下jQuery代码使一个元素动画透明
[JavaScript] 纯文本查看 复制代码
$(“#myElement”).animate({      opacity: .4      }, 1000, function() {     
// 动画完成,所有浏览器下有效  });  

不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
方法3:通过RGBA设置透明度
通过RGBA设置透明度,只有最新的浏览器支持,可通过RGBA的alpha通道的方式设定。
前三个值是rgb的颜色值,最后一个透明度的值,这个alpha设置跟opacity 属性一样,可以精确到小数点后两位,值越大,越不透明
[CSS] 纯文本查看 复制代码
#rgba{background:rgba(98,135,167,.4);} 

方法4:通过HSLA设置透明度
HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。
[CSS] 纯文本查看 复制代码
#hsla { background: hsla(207, 38%, 47%, .4);  } 

如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。

注意:RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。
alpha设置的RGBA和HSLA只影响背景颜色的透明度。








作者: 竹林风    时间: 2018-12-23 21:51
看到这帖子真是高兴!
作者: liu    时间: 2018-12-23 23:22
强烈支持楼主ing……
作者: 站长苏飞    时间: 2018-12-24 10:14
我只是路过打酱油的。
作者: 范范    时间: 2018-12-25 09:42
楼主加油,我们都看好你哦。
作者: 竹林风    时间: 2018-12-25 17:18
看到这帖子真是高兴!




欢迎光临 苏飞论坛 (http://www.sufeinet.com/) Powered by Discuz! X3.4