首页 > Web开发 > 详细

css: CSS3 filter(滤镜) 的使用

时间:2019-01-10 23:59:28      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:ref   ado   filter   tex   css3   rom   bject   enter   ext   

CSS3 filter(滤镜) 属性

filter 属性定义了元素(通常是技术分享图片)的可视效果(例如:模糊与饱和度)。

定义和使用

默认值 none
继承 no
动画支持 是。详细可查阅 CSS 动画
版本 CSS3
JavaScript 语法 object.style.WebkitFilter="grayscale(100%)"

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。查看相关函数使用

示例

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

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

这意味着当你有彩色logo图片时,UI就不必再制作灰色的logo了。

参考文档

查看浏览器支持

css: CSS3 filter(滤镜) 的使用

标签:ref   ado   filter   tex   css3   rom   bject   enter   ext   

原文:https://www.cnblogs.com/gaollard/p/10252917.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号