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

html-css013

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之间。

在HTML中,要使用颜色的话,需要用他们的名称来引用。HTML支持大概140种标准颜色,可以看链接: Color Names Supported by All Browsers 。

前面我们在 HTML5(5)——属性 一文中简要提到过style属性,而在 HTML5(8)——样式

一文中详细介绍了 style 的各个property的作用,这里我们用它来控制网页背景颜色,文本颜色等。语法大概如下:

同背景颜色一样设置,其中一些不同。style中属性不同,这里就是 color 属性,值就是颜色名称。

这里就使用 border property,而它的值包括粗细,填充,颜色,你可以使用自己想要的值。

在HTML中,颜色可以用几种类型的值来描述:RGB, HEX, HSL, RGBA 和HSLA。

rgb(red,green,blue) ,每一种参数都是颜色的密度值,范围在0-255之间。例如,rgb(0,0,0)是黑色,rgb(255,255,255)是白色。不同的灰度,是3种颜色相同的情况下的改变。

这是用16进制来表示RGB的三种颜色,也是三种值,范围都在00-ff之间。同样灰度也是用相同的三种颜色的值大小,来表示。

这种颜色的是通过色调,饱和度和亮度,来表示某种颜色。

hsl(hue, saturation, lightness) 。色调的值在0-360之间。0是红色,120是绿色,240是蓝色。饱和度是百分数表示的,0%表示灰色,100%是颜色本身。亮度也是百分数,0%是黑色,50%是适中,100%是白色。灰度是色调和饱和度都为0值,而通过亮度的调节来改变。

这两者都是在RGB和HSL的基础上,增加了第四个参数,透明度(alpha)。透明度的范围在0.0-1.0之间。0.0是全透明,而1.0是不透明。