css3——filter

filter 属性定义了元素(通常是<img>)的可视效果(我试了一下,几乎可以对所有的元素进行可视效果操作(元素内部所有内容,也包括背景效果))

1、filter:blur(npx); 给元素设置高斯模糊效果;

2、filter:brightness(percent); 调整图像的亮度; percent = 0 时全黑,percent = 50%时像是加了一层透明度为0.5 背景色时黑色的蒙版,对文字和背景图片都有影响;percent = 100% 时正常没有效果; percent >100%时图片变亮,文字和背景色没有明显变化;

            filter: brightness(50%);
            /* 看上去像是在元素上加了一层透明度为0.5 背景色是黑色的蒙版 */

3、filter:contrast(percent);调整图片的对比度;percent = 0 时全黑,percent = 50%时比brightness 的效果亮一点,只是颜色趋近,对比度减小,对文字和背景图片都有影响;percent = 100% 时正常没有效果; percent >100%时图片暗的像素更暗,亮的像素更亮;

            filter: contrast(50%);

4、filter:drop-shadow(x-offset y-offset bulr scale color) 设置背景阴影;几个参数之间空格隔开;

参数值:x方向偏移量(正负控制方向),y方向偏移量,模糊,背景放大或缩小(默认0,负数缩小,正数放大),设置背景阴影颜色(和浏览器相关);

5、filter:grayscale(percent) 将图片变为灰度图片显示; percent = 0 时 没有变化 percent = 50% 时 饱和度降低,可见的变灰;percent = 100%, 显示跟报纸差不多,ps将rgb模式转CMYK,报纸印刷;

            filter: grayscale(100%);

6、filter:hue-rotate(deg);给图像应用色相旋转; 默认0deg; 我设置了背景颜色为红色,然后色度从红变-黑-绿-蓝-紫-粉-红;其中因为对颜色不敏感没看出来的不算…… 应该是在色盘上按莫一角度转一圈,将颜色按某一透明度叠加在上面吧…… 应该……官方解释:给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

filter: hue-rotate(40deg);

7、filter:invert(percent) 反相; percent = 0 是正常的; percent = 100% 是完全反相; 反相就效果照相机里有,很想X光片的那个效果……percent >=0;小于0 的话没效果 相当于0;

            filter: invert(0%);

 8、filter:opacity(percent) 透明度;

9、filter:saturate(percent) 饱和度;

10、filter:sepia(%) 将图像转换为深褐色;

11、filter:url(svg) URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素;

svg不是太懂,以后回来补。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值