【前端丨学习笔记】设置不透明度的几种方法

Amy

【前端丨学习笔记】设置元素不透明度的几种方法

【零基础学习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只影响背景颜色的透明度。

竹林风

看到这帖子真是高兴！

范范

楼主加油，我们都看好你哦。

站长苏飞

我只是路过打酱油的。

liu

强烈支持楼主ing……

竹林风

看到这帖子真是高兴！