CSS-滤镜属性

      CSS中的滤镜与photoshop中的滤镜相似，她可以用很简单的方法对网页中的对象进行特效处理。使用滤镜属性可以把一些特殊效果添加到网页元素中，是网页更加美观。

1.1不透明度 alpha

语法：

filter:alpha(参数1=参数值，参数2=参数值，.....)

举例：修改所有图片的颜色为黑白 (100% 灰度):

img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);
}

1.2动感模糊blur

blur属性用于设置对象的动态模糊效果。

语法：

filter:blur(add=参数值，direction=参数值，strength=参数值)

说明 :blur属性中的参数如表：

模糊实例

图片使用高斯模糊效果：

img {-webkit-filter: blur(5px); /* Chrome, Safari, Opera */filter: blur(5px);
}

1.3 对颜色进行透明处理 chroma

chroma 滤镜的作用是将图片中的某种颜色转换为透明色，产生透明效果。

语法：

filter:chroma(color=颜色代码或颜色关键字)

举例：

img {-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */filter: opacity(30%);
}

1.4 阴影效果dropShadow

dropShadow 滤镜用于设置在指定的方向和位置上产生阴影效果。

语法：

color属性控制阴影的颜色；

offX 和 offy 分别设置阴影相对于原始图像移动的水平距离和垂直距离；

positive 属性设置阴影是否透明。

img {-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */filter: drop-shadow(8px 8px 10px red);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！