Warning: include(../source/header.php): failed to open stream: No such file or directory in /www/web/hiheng/public_html/demo/css3/CSS3filter.php on line 115

Warning: include(): Failed opening '../source/header.php' for inclusion (include_path='.:/www/wdlinux/apache_php-7.1.10/lib/php') in /www/web/hiheng/public_html/demo/css3/CSS3filter.php on line 115

CSS3 filter

CSS3 Filter跟见鬼的IE滤镜是两码事,是W3C CSS filter Effect 1.0中定义的滤镜,是一个使用CSS改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

使用方法:
filter:filter(value);
filter:filter(value) filter(value) filter(value);/* 多属性 */

Blur(模糊)

原图
图片模糊效果
星夜下
  调色板上只有蓝与灰
  你用那透视我灵魂深处的双眼
  望向夏日的天空
  山上的阴影衬托出树和水仙的轮廓
  用雪地斑驳的色彩
  捕捉微风和冬日的寒冷
  如今我才明白你想对我说些什么
  你清醒的时候承受了多大的痛苦
原文
星夜下
  调色板上只有蓝与灰
  你用那透视我灵魂深处的双眼
  望向夏日的天空
  山上的阴影衬托出树和水仙的轮廓
  用雪地斑驳的色彩
  捕捉微风和冬日的寒冷
  如今我才明白你想对我说些什么
  你清醒的时候承受了多大的痛苦
文字模糊效果

图像模糊参数单位:px/em/pt。 示例:

filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);	

Brightness(亮度)

原图
亮度大于0
亮度小于于0

亮度参数:"-1"至"1",值越大亮度越高。示例:

filter: brightness(0.3);
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);

Saturation(饱和度)

原图
饱和度大于100%
饱和度小于100%

饱和度参数:半分比,以100%为中间值。 示例:

filter: saturate(50%);
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

Hue Rotate(色相)

原图
色相180
星夜下
  调色板上只有蓝与灰
  你用那透视我灵魂深处的双眼
  望向夏日的天空
  山上的阴影衬托出树和水仙的轮廓
  用雪地斑驳的色彩
  捕捉微风和冬日的寒冷
  如今我才明白你想对我说些什么
  你清醒的时候承受了多大的痛苦
原文
星夜下
  调色板上只有蓝与灰
  你用那透视我灵魂深处的双眼
  望向夏日的天空
  山上的阴影衬托出树和水仙的轮廓
  用雪地斑驳的色彩
  捕捉微风和冬日的寒冷
  如今我才明白你想对我说些什么
  你清醒的时候承受了多大的痛苦
色相效果

色相参数:角度值0—360。 示例:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);	

Contrast(对比度)

原图
对比度小于100%
对比度大于100%

对比度参数:百分比;以100%为中间值。示例:

filter: contrast(50%);
-webkit-filter: contrast(50%);
-moz-filter: contrast(50%);
-o-filter: contrast(50%);
-ms-filter: contrast(50%);	        

Invert(反相)

原图
反向值100%

反相参数:百分比;0%-100%。示例:

filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);	 

Grayscale(灰度)

原图
灰度100%

灰度参数:百分比 0%-100%。示例:

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%); 

Sepia(怀旧)

原图
过滤值100%

怀旧参数:百分比 0%-100%。示例:

filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);	

Warning: include(../source/footer.php): failed to open stream: No such file or directory in /www/web/hiheng/public_html/demo/css3/CSS3filter.php on line 361

Warning: include(): Failed opening '../source/footer.php' for inclusion (include_path='.:/www/wdlinux/apache_php-7.1.10/lib/php') in /www/web/hiheng/public_html/demo/css3/CSS3filter.php on line 361