首先我们新建一个html文档,(我用的是sublime text 编码器)为了方便起见,我们采用在html文档中使用style标签直接嵌入CSS样式的方式。为了进行效果比较,我们插入两张一样的图片,大小设置为100px。第二章图片作为效果图使用,将其class设置为pic。效果如图显示
考虑到浏览器的兼容性,我们使用IE 9.0及以上版本或者使用Chrome18.0.97及以上版本。这里我使用的是IE9.0版本,接下来我们看插入效果图。
然后进入我们的效果编码效果展示部分:
一、grayscale特效,grayscale的作用是把图片变成黑白图。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:grayscale(1);(-webkit-作用是处理浏览器兼容性)效果如图所示
二、sepia特效,sepia的作用是把图片变成褐色,产生复古效果。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:sepia(1);效果如图所示
三、saturate特效,saturate的作用还是设置更改图片的饱和度,可根据自己对图片饱和度的要求任意设置。这里设置为5,
在style中给.pic设置属性,写入这样一行代码:--webkit-filter:saturate(5);
效果如图所示
四、hue-rotate特效,saturate的作用是改变色相,属性值为角度,默认值。0deg
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:hue-rotate(90deg);效果如图所示
五、opacity特效,opacity的作用是设置改变图片的透明度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:opacity(.1);效果如图所示
六、invert特效,invert的作用效果和相机底片一样,进行反色,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:invert(1);效果如图所示
七、brightness特效,brightne的作用是改变设置图片的亮度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:brightness(.5);效果如图所示
八、contrast特效,contrast的作用是改变设置图片的对比度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:contrast(2);效果如图所示
九、blur特效,blur的作用是改变图片的清晰度,默认值为0。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:blur(2px);效果如图所示
十、drop-shadow特效,drop-shadow的作用是产生阴影。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:drop-shadow(2px);效果如图所示
当然根据需要可以同时使用两种或几种特效达到最好的效果。