html5和js如何改变图片的亮度

JavaScript06

html5和js如何改变图片的亮度,第1张

首先,您说的亮度应该是图片透明度。

图片透明度调整很简单,只要在图片的属性中加上{filter:alpha(opacity=50)-moz-opacity:0.5-khtml-opacity: 0.5opacity: 0.5};

opacity是最重要的,因为它是CSS透明的标准属性,取值范围在0-1之间,目前支持的浏览器有:

Firefox、Chrome、Opera、Safari。(也就是说,除了IE,它支持所有主流浏览器);

filter:alpha(opacity=50)是专门给IE设定的属性,取值的范围在0-100之间;

-moz-opacity是为了兼容一些老版本的Mozilla浏览器,取值范围在0-1之间;

-khtml-opacity是为了兼容一些老版本的Safari浏览器,取值范围在0-1之间。

方法一: 用CSS a 伪类控制:把原始背景图作为a的背景图,另用PS做一个变暗后的背景图

a{background:url(原始背景图路径) no-repeat}

a:hover{background:url(变暗后背景图路径) no-repeat}/*鼠标经过变换背景图 也可以只用底色如:background:#000*/

方法二:用Jquery,仍然是变换两个背景图片。

$('#project').toggle(function(){this.css(background,'背景图路径‘)},function(){this.css(background,'变暗背景图路径‘)}})

方法二为点击DIV变换背景。呵,不太明白这样做的确切意图,如果是为了突出链接,只需用a伪类hover变换就行了。因为"点击"外div没有什么意义。如果是"点击"链接,页面己经跳转,是看不到效果的。