码迷,mamicode.com
首页 > Web开发 > 详细

css - 滤镜

时间:2018-01-24 13:57:00      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:rtx   css   osi   透明   type   ota   ras   语法   div   

css3滤镜

语法:filter: value1 value2 ...;

值:

none 默认值、initial 设置为默认值、inherit 继承

opacity(0-1)  透明度,可以写为:opacity: 0-1;  √

grayscale(0-1)  灰度

contrast(0-n)  对比度

saturate(0-n)  饱和度

brightness(0-n)  亮度

blur(npx)  模糊  √

invert(0-1)  反色

sepia(0-1)  褐色

hue-rotate(0-360deg)  色相旋转

drop-shadow(x y blur color)  阴影

url(svg-url#element-id)  svg滤镜  √

grayscale(1) invert(1)  X光

ie滤镜

透明

filter: progid:DXImageTransform.Microsoft.Alpha();

属性:

style  设置透明风格,0 默认  1 线性  2 径向  3 矩形

opacity  设置不透明度值,0-100

finishOpacity  设置最后不透明度值,0-100

startX  设置水平方向开始值,num

finishX  设置水平方向结束值,num

startY  设置垂直方向开始值,num

finishY  设置垂直方向结束值,num

模糊

filter: progid:DXImageTransform.Microsoft.Blur();

filter: progid:DXImageTransform.Microsoft.MutionBlur();

属性1:

pixelRadius  设置模糊程度,num

makeShadow  设置是否处理为阴影,boolean

shadowOpacity  设置阴影的透明度,0-100

属性2:

add  设置图像模糊是否覆盖在原图上,true  false

direction  设置对象模糊方向,0-315

strength  设置对象模糊范围,默认值5

专用颜色透明

filter: progid:DXImageTransform.Microsoft.Chroma();

属性:

color  设置颜色

光源

filter: progid:DXImageTransform.Microsoft.Light();

属性:

addAmbient  加入对象环境光

addCone  加入锥形光源

addPoint 加入点光源

changeColor  改变亮度颜色

changeStrength  改变亮度长度

clear  清除亮度

moveLight  移动光源焦点

发光

filter: progid:DXImageTransform.Microsoft.Glow();

透明掩膜

filter: mask();

属性:

color  设置颜色

阴影

filter: progid:DXImageTransform.Microsoft.Shadow();

filter: progid:DXImageTransform.Microsoft.DropShadow();

属性1:

color  设置颜色

strength  设置范围

direction  设置角度

属性2:

color  设置颜色

offX  设置水平位置

offY  设置垂直位置

positive  设置正反面,0-1

波纹

filter: progid:DXImageTransform.Microsoft.Wave();

属性:

add  0-1

freq  变形值

strength  变形强度

lightStrength  变形百分比

phase  角度变形百分比

灰度

filter: gray;

反色

filter: invert;

X光

filter: xray;

翻转

filter: flipH;

filter: flipV;

马赛克

filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

rgba

progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorstr=‘#886287a7‘, endColorstr=‘#886287a7‘);

png透明、多背景、放大

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader();

属性:

enabled  设置滤镜是否激活,boolean

sizingMethod  设置显示方式, image  crop  scale

src  设置链接

渐变

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#000000, endColorstr=#FFFFFF); 

旋转

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

矩阵

filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod= ‘auto expand‘, M11= fM11, M12= fM12, M21= fM21, M22= fM22 );

css - 滤镜

标签:rtx   css   osi   透明   type   ota   ras   语法   div   

原文地址:https://www.cnblogs.com/yiku/p/8341100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!