{"id":1088,"date":"2013-01-05T18:30:21","date_gmt":"2013-01-05T10:30:21","guid":{"rendered":"http:\/\/www.hiheng.com\/blog\/?p=1088"},"modified":"2015-03-11T15:36:22","modified_gmt":"2015-03-11T07:36:22","slug":"css3-filter","status":"publish","type":"post","link":"http:\/\/www.hiheng.com\/blog\/?p=1088","title":{"rendered":"CSS3 filter"},"content":{"rendered":"
\n
\n

CSS3 Filter\u662fW3C CSS filter Effect 1.0<\/a>\u4e2d\u5b9a\u4e49\u7684\u6ee4\u955c\uff0c\u4e00\u4e2a\u4f7f\u7528CSS\u6765\u6539\u53d8\u56fe\u7247\u548cHTML\u7684\u6a21\u7cca\u5ea6\u3001\u4eae\u5ea6\u3001\u5bf9\u6bd4\u5ea6\u3001\u9971\u548c\u5ea6\u7b49\u7b49\u6548\u679c\u7684\u8fc7\u6ee4\u5668\u3002<\/h2>\n

\u597d\u5427\uff0c\u6bcf\u6b21\u5199\u8fd9\u79cd\u535a\u5ba2\u7684\u65f6\u5019\uff0c\u90fd\u6709\u6539\u7248\u7684\u51b2\u52a8\uff0c\u6211\u628a\u8be6\u7ec6\u5185\u5bb9\u5199\u5728\u4e86\u8fd9\u91cc\uff0c\u8bf7\u731b\u51fb:DEMO<\/a>
\n
\n<\/hgroup>\n

\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n

\r\nfilter:filter(value);\r\nfilter:filter(value) filter(value) filter(value);\/* \u591a\u5c5e\u6027 *\/<\/pre>\n<\/div>\n
\n
Blur\uff08\u6a21\u7cca\uff09<\/span><\/h3>\n
\n
\u56fe\u50cf\u6a21\u7cca\u53c2\u6570\u5355\u4f4d:px\/em\/pt\u3002 \u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: blur(5px);\r\n-webkit-filter: blur(5px);\r\n-moz-filter: blur(5px);\r\n-o-filter: blur(5px);\r\n-ms-filter: blur(5px);<\/pre>\n<\/div>\n
Brightness\uff08\u4eae\u5ea6\uff09<\/span><\/h3>\n
\n
\u4eae\u5ea6\u53c2\u6570:”-1″\u81f3”1″,\u503c\u8d8a\u5927\u4eae\u5ea6\u8d8a\u9ad8\u3002\u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: brightness(0.3);\r\n-webkit-filter: brightness(0.3);\r\n-moz-filter: brightness(0.3);\r\n-o-filter: brightness(0.3);\r\n-ms-filter: brightness(0.3);<\/pre>\n<\/div>\n
Saturation\uff08\u9971\u548c\u5ea6\uff09<\/span><\/h3>\n
\n
\u9971\u548c\u5ea6\u53c2\u6570:\u534a\u5206\u6bd4,\u4ee5100%\u4e3a\u4e2d\u95f4\u503c\u3002 \u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: saturate(50%);\r\n-webkit-filter: saturate(50%);\r\n-moz-filter: saturate(50%);\r\n-o-filter: saturate(50%);\r\n-ms-filter: saturate(50%);<\/pre>\n<\/div>\n
Hue Rotate\uff08\u8272\u76f8\uff09<\/span><\/h3>\n
\u8272\u76f8\u53c2\u6570:\u89d2\u5ea6\u503c0\u2014360\u3002 \u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: hue-rotate(180deg);\r\n-webkit-filter: hue-rotate(180deg);\r\n-moz-filter: hue-rotate(180deg);\r\n-o-filter: hue-rotate(180deg);\r\n-ms-filter: hue-rotate(180deg);<\/pre>\n<\/div>\n
Contrast\uff08\u5bf9\u6bd4\u5ea6\uff09<\/span><\/h3>\n
\n
\u5bf9\u6bd4\u5ea6\u53c2\u6570:\u767e\u5206\u6bd4\uff1b\u4ee5100%\u4e3a\u4e2d\u95f4\u503c\u3002\u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: contrast(50%);\r\n-webkit-filter: contrast(50%);\r\n-moz-filter: contrast(50%);\r\n-o-filter: contrast(50%);\r\n-ms-filter: contrast(50%);<\/pre>\n<\/div>\n
Invert\uff08\u53cd\u76f8\uff09<\/span><\/h3>\n
\n
\u53cd\u76f8\u53c2\u6570\uff1a\u767e\u5206\u6bd4\uff1b0%-100%\u3002\u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: invert(100%);\r\n-webkit-filter: invert(100%);\r\n-moz-filter: invert(100%);\r\n-o-filter: invert(100%);\r\n-ms-filter: invert(100%);<\/pre>\n<\/div>\n
Grayscale\uff08\u7070\u5ea6\uff09<\/span><\/h3>\n
\n\u7070\u5ea6\u53c2\u6570:\u767e\u5206\u6bd4 0%-100%\u3002\u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: grayscale(100%);\r\n-webkit-filter: grayscale(100%);\r\n-moz-filter: grayscale(100%);\r\n-o-filter: grayscale(100%);\r\n-ms-filter: grayscale(100%);<\/pre>\n<\/div>\n
Sepia\uff08\u6000\u65e7\uff09<\/span><\/h3>\n
\n\u6000\u65e7\u53c2\u6570:\u767e\u5206\u6bd4 0%-100%\u3002\u793a\u4f8b\uff1a<\/p>\n
\r\nfilter: sepia(100%);\r\n-webkit-filter: sepia(100%);\r\n-moz-filter: sepia(100%);\r\n-o-filter: sepia(100%);\r\n-ms-filter: sepia(100%);<\/pre>\n<\/div>\n<\/div>\n
:)<\/span><\/p>\n
There is one more thing<\/strong>
\n\u5982\u679c\u4f60\u53d1\u73b0\u8fc7\u6ee4\u540e\u7684\u56fe\u7247\u5bf9\u6bd4\u539f\u56fe\u6ca1\u6709\u4ec0\u4e48\u53d8\u5316\uff0c\u90a3\u8bf4\u660e\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u8fd9\u4e2aCSS3 filter\u5c5e\u6027\u3002
\n\u5176\u5b9e\u76ee\u524d\u53ea\u6709webkit\u6d4f\u89c8\u5668\u652f\u6301\u8be5\u5c5e\u6027\u3002Safari\u3001Firefox\u3001Opera\u3001IE\u8fd8\u4e0d\u7ed9\u529b\u3002
\n\u8be6\u7ec6\u5185\u5bb9\u8bf7\u731b\u6233:DEMO<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\n
\n
CSS3 Filter\u662fW3C CSS filter Effect 1.0<\/a>\u4e2d\u5b9a\u4e49\u7684\u6ee4\u955c\uff0c\u4e00\u4e2a\u4f7f\u7528CSS\u6765\u6539\u53d8\u56fe\u7247\u548cHTML\u7684\u6a21\u7cca\u5ea6\u3001\u4eae\u5ea6\u3001\u5bf9\u6bd4\u5ea6\u3001\u9971\u548c\u5ea6\u7b49\u7b49\u6548\u679c\u7684\u8fc7\u6ee4\u5668\u3002<\/h2>\n
\u597d\u5427\uff0c\u6bcf\u6b21\u5199\u8fd9\u79cd\u535a\u5ba2\u7684\u65f6\u5019\uff0c\u90fd\u6709\u6539\u7248\u7684\u51b2\u52a8\uff0c\u6211\u628a\u8be6\u7ec6\u5185\u5bb9\u5199\u5728\u4e86\u8fd9\u91cc\uff0c\u8bf7\u731b\u51fb:DEMO<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[154,11],"tags":[],"class_list":["post-1088","post","type-post","status-publish","format-standard","hentry","category-css","category-11"],"_links":{"self":[{"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1088"}],"version-history":[{"count":30,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1088\/revisions"}],"predecessor-version":[{"id":2461,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1088\/revisions\/2461"}],"wp:attachment":[{"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1088"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.hiheng.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}