jquery 怎么调节图片亮度_使用JQuery设置和改变CSS透明度 （转载）

直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

Example Source Code

$("#myElement").css({ opacity: .4 }); // 所有浏览器有效

您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({   opacity: .4 }, 1000, function() {

// 动画完成，所有浏览器下有效   });

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

六、通过RGBA的透明度

另一个CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+)，可通过RGBA的alpha通道的方式设定。语法如下：

Example Source Code

#rgba {       background: rgba(98, 135, 167, .4);   }

在上面的定义中，通过RGB(前三个数字)给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

七、通过 HSLA的透明度

类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。以下是HSLA透明的例子：

Example Source Code

#hsla {       background: hsla(207, 38%, 47%, .4);   }

更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度，仅此而已。

本篇文章来源于 我爱编程网 转载请以链接形式注明出处 网址：http://www.bcw52.com/Article/1284.html