{"id":3804,"date":"2013-11-21T21:53:21","date_gmt":"2013-11-21T13:53:21","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3804"},"modified":"2021-07-22T13:10:04","modified_gmt":"2021-07-22T05:10:04","slug":"css-svg-image-blur","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2013\/11\/css-svg-image-blur\/","title":{"rendered":"\u4f7f\u7528CSS\u5c06\u56fe\u7247\u8f6c\u6362\u6210\u6a21\u7cca(\u6bdb\u73bb\u7483)\u6548\u679c"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=3804<\/a><\/p>\n

\u53bb\u5e74\u76db\u590f\u4e4b\u65f6\uff0c\u66fe\u5199\u8fc7\u201c\u5c0ftip: \u4f7f\u7528CSS\u5c06\u56fe\u7247\u8f6c\u6362\u6210\u9ed1\u767d<\/a>\u201d\u4e00\u6587\uff0c\u672c\u6587\u7684\u6a21\u5f0f\u4ee5\u53ca\u5185\u5bb9\u5176\u5b9e\u8d70\u5f97\u662f\u7c7b\u4f3c\u8def\u7ebf\u3002CSS3 \u2192 SVG \u2192 IE filter<\/code> \u2192 canvas<\/code>.<\/p>\n

\"\u5f69\u8272\u7167\u7247CSS\u9ed1\u767d\u793a\u610f\u56fe<\/p>\n

\u524d\u6bb5\u65f6\u95f4\uff0ciOS7\u4e0d\u662f\u74dc\u672a\u719f\u5c31\u843d\u5730\u4e86\u561b\uff0c\u7136\u540e\u6361\u74dc\u7684\u4eba\u5f88\u591a\uff0c\u7136\u540e\u56fd\u5185\u5916\u5f00\u59cb\u4e86\u5404\u79cd\u63a2\u8ba8\uff0c\u4ece\u754c\u9762\u5230\u52a8\u753b\uff0c\u4ece\u517c\u5bb9\u5230\u5b9e\u73b0\u7b49\u3002\u5176\u4e2d\uff0c\u201c\u6bdb\u73bb\u7483\u201d\u4e00\u6b21\u6886\u6886\u51fa\u4e16\uff0c\u4e00\u4e9b\u7231\u6298\u817e\u7684\u5f04\u6f6e\u4eba\u5c31\u53ef\u4ee5\u7422\u78e8\u600e\u4e48\u7528CSS\u5b9e\u73b0\u4e4b\uff0c\u56fd\u5185\u6709\u4e4b\uff08\u4e0d\u8bb0\u5f97\u4e86\uff09\uff0c\u56fd\u5916\u4e5f\u6709\u4e4b\uff08\u6bd4\u65b9\u8bf4CSS tricks\u4e0a\u7684\u8fd9\u7bc7”lurry Transparent Header Effect from iOS7 in CSS<\/a>“\uff09~<\/p>\n

\"\u6bdb\u73bb\u7483\u6548\u679c\"<\/p>\n

\u867d\u7136\u672c\u6587\u6807\u9898\u4e5f\u6709\u201c\u6bdb\u73bb\u7483\u201d\u4e8c\u5b57\uff0csorry, \u662f\u201c\u4e09\u5b57\u201d\u3002\u4f46\u662f\uff0c\u5e76\u4e0d\u662f\u4ecb\u7ecd\u5982\u4f55\u5b9e\u73b0\u6bdb\u73bb\u7483\u6548\u679c\u7684\uff0c\u800c\u662f\u4ecb\u7ecd\u6bdb\u73bb\u7483\u6548\u679c\u5b9e\u73b0\u7684\u57fa\u7840\u2014\u2014\u6a21\u7cca\u3002\u54c8\u54c8\uff0c\u6055\u6211\u53d6\u5de7\uff0c\u501f\u7528\u201c\u6bdb\u73bb\u7483\u201d\u4e4b\u8bcd\uff0c\u6cbe\u6cbe\u70ed\u6c14\uff0c\u6563\u53d1\u9999\u6c14\uff1b\u8702\u98de\u8776\u821e\uff0c\u56f4\u89c2\u535a\u4e3b\u3002<\/p>\n

\u672c\u6587\u5f88\u5355\u7eaf\uff0c\u5c31\u662f\u56fe\u7247\u6a21\u7cca\u6548\u679c\u7684\u5b9e\u73b0\u3002<\/p>\n

\"\u6a21\u7cca\u6548\u679c\u622a\u56fe\u793a\u610f\"<\/p>\n

CSS3 blur\u6ee4\u955c\u5b9e\u73b0<\/h3>\n

\u5982\u4e0b\u6d4b\u8bd5\u4ee3\u7801\uff1a<\/p>\n

\n
.blur {    \r\n    -webkit-filter: blur(10px); \/* Chrome, Opera *\/<\/span>\r\n       -moz-filter: blur(10px);\r\n        -ms-filter: blur(10px);    \r\n            filter: blur(10px);    \r\n}<\/pre>\n<\/div>\n
\u76f8\u5173HTML\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\n
<img src=\"mm1.jpg\" \/>\r\n<img src=\"mm1.jpg\" class=\"blur\" \/><\/pre>\n<\/div>\n
\u5982\u679c\u4f60\u624b\u4e0a\u7684\u6d4f\u89c8\u5668\u662f\u4e0b\u56fe\u7eff\u8272\u6240\u793a\uff1a
\n\"CSS3<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS3 blur\u6ee4\u955c\u4e0e\u7167\u7247\u6a21\u7cca<\/a><\/p>\n
\u53ef\u4ee5\u770b\u5230\u7c7b\u4f3c\u6587\u7ae0\u4e00\u5f00\u59cb\u5c55\u793a\u7684\u6a21\u7cca\u5bf9\u6bd4\u6548\u679c\u56fe\u3002<\/p>\n
\u5176\u4ed6\u4e9b\u6d4f\u89c8\u5668\uff0c\u5982FireFox\u5230\u76ee\u524d\u8fd8\u6ca1\u6709\u652f\u6301CSS3 filter<\/code>. \u5f53\u7136\uff0c\u8981\u5b9e\u73b0\uff08\u6bd4\u65b9\u8bf4\uff09FireFox 24\u6d4f\u89c8\u5668\u4e0a\u7167\u7247\u53d8\u6a21\u7cca\u7684\u6548\u679c\uff0c\u4e5f\u662f\u53ef\u4ee5\u7684\u3002\u53ef\u4ee5\u4f7f\u7528SVG\u7684\u6a21\u7cca\u6ee4\u955c\u3002<\/p>\n
SVG\u6ee4\u955c\u5b9e\u73b0<\/h3>\n
\u4e0d\u7ba1\u5012\u817e\u4ec0\u4e48\u65b9\u6cd5\uff0c\u641e\u4e00\u4e2a\u4ee3\u7801\u5982\u4e0b\uff0c\u4e14\u5168\u540d\u4e3ablur.svg<\/code>\u7684SVG\u6587\u4ef6\uff1a<\/p>\n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\">\r\n<svg version=\"1.1\" \r\n     xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n     xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\r\n     xmlns:ev=\"http:\/\/www.w3.org\/2001\/xml-events\"     \r\n     baseProfile=\"full\">\t \r\n    <defs>\r\n        <filter id=\"blur\">\r\n            <feGaussianBlur stdDeviation=\"10\" \/>\r\n        <\/filter>\r\n    <\/defs><\/span>\r\n<\/svg><\/pre>\n<\/div>\n
\u4e0a\u9762\u4ee3\u7801\u7ea2\u8272\u9ad8\u4eae\u7684\u5c31\u662f\u6dfb\u52a0\u7684\u6ee4\u955c\u4ee3\u7801\uff08\u5176\u4ed6\u4ee3\u7801Dreamweaver\u81ea\u52a8\u751f\u6210\uff0c\u5176\u5b9e\uff0c\u53ea\u8981\u4e00\u884c\u5c31\u591f\u4e86~\uff09\u3002<\/p>\n
\u5982\u4e0bCSS\u8c03\u7528\u4ee3\u7801\uff1a<\/p>\n
\n
filter: url(blur.svg#blur); \/* FireFox, Chrome, Opera *\/<\/span><\/pre>\n<\/div>\n
\u7136\u540e\uff0c\u6548\u679c\u5c31\u51fa\u6765\u4e86\u3002\u5982\u679c\u4f60\u624b\u4e0a\u7684\u6d4f\u89c8\u5668\u662fFireFox25-\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aSVG\u6ee4\u955c\u5b9e\u73b0\u7167\u7247\u6a21\u7ccademo<\/a><\/p>\n
\"SVG\u6ee4\u955c\u4e0bFireFox\u6d4f\u89c8\u5668\u7684\u6548\u679c<\/p>\n
IE10\u4ee5\u53caIE11\u4ee5\u53ca\u4ee5\u540e\u7684IE11+\u90fd\u662f\u652f\u6301SVG\u7684\u6ee4\u955c\u7684\uff0c\u4f46\u662f\uff0c\u6b64demo\u5728\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4e0b\u662f\u65e0\u6548\u7684\uff0c\u4e3a\u4f55\uff1f<\/p>\n
\u597d\u50cf\u56e0\u4e3a\u5176\u4e0d\u652f\u6301\u76f4\u63a5\u5728CSS\u4f7f\u7528\u4f7f\u7528filter: url<\/code>\u7684\u5199\u6cd5\uff0c\u5176\u5b9e\uff0c\u8981\u60f3\u5b9e\u73b0IE10, IE11\u4e0b\u7684\u6a21\u7cca\u6548\u679c\uff0c\u4e5f\u662f\u53ef\u4ee5\uff0c\u5c31\u662f\u9002\u7528\u6027\u5dee\u4e86\u70b9\uff0c\u56fe\u7247\u8981\u5199\u5165SVG\u4ee3\u7801\uff0c\u7c7b\u4f3c\u4e0b\u9762\uff1a<\/p>\n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\">\r\n<svg version=\"1.1\" \r\n     xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n     xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\r\n     xmlns:ev=\"http:\/\/www.w3.org\/2001\/xml-events\"     \r\n     baseProfile=\"full\">\r\n     <defs>\r\n        <filter id=\"blur\"<\/span>>\r\n            <feGaussianBlur stdDeviation=\"10\" \/>\r\n        <\/filter>\r\n    <\/defs>\r\n    <image xlink:href=\"mm1.jpg\" x=\"0\" y=\"0\" height=\"191\" width=\"265\" filter=\"url(#blur)\"<\/span> \/>\r\n<\/svg><\/pre>\n<\/div>\n
\u7136\u540e\uff0cSVG\u4f5c\u4e3a\u80cc\u666f\u56fe\u7247\u8f7d\u5165\uff1a<\/p>\n
\n
.blur {\r\n    background-image: url(blur.svg);\r\n}<\/pre>\n<\/div>\n
\u5c31\u53ef\u4ee5\u54c8~~<\/p>\n
\u522b\u5fd8\u4e86IE\u6d4f\u89c8\u5668<\/h3>\n
IE6?-IE9\u6d4f\u89c8\u5668\u53ef\u4ee5\u501f\u52a9IE filter<\/code>\u6a21\u7cca\u6ee4\u955c\u5b9e\u73b0\uff0c\u5982\u4e0bCSS\uff1a<\/p>\n
\n
\r\n\/* IE6?~IE9 IE6\u672a\u4eb2\u81ea\u6d4b\u8bd5\uff0c\u6309\u7167\u81ea\u5df1\u4ee5\u524d\u4f7f\u7528\u8be5\u6ee4\u955c\u5b9e\u73b0\u6295\u5f71\u6548\u679c\u7684\u7ecf\u9a8c\uff0cIE6\u5e94\u8be5\u662f\u652f\u6301\u7684*\/<\/span>\r\nfilter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); <\/pre>\n<\/div>\n
\u4e8e\u662f\u4e4e\uff0c\u4e0a\u9762\u4e00\u5708\u8d70\u6765\uff0c\u6240\u6709\u4e3b\u6d41\u6d4f\u89c8\u5668\u90fd\u9732\u4e86\u8138\uff0c\u90fd\u6709\u5b9e\u73b0\u56fe\u7247\u6a21\u7cca\u6548\u679c\u7684\u53ef\u80fd\u3002<\/p>\n
\u4e8e\u662f\uff0c\u5c31\u6b64\u5927\u7efc\u5408\u4e00\u4e0b\uff1a<\/p>\n
\n
.blur {\t\r\n    filter: url(blur.svg#blur); \/* FireFox, Chrome, Opera *\/<\/span>\r\n    \r\n    -webkit-filter: blur(10px); \/* Chrome, Opera *\/<\/span>\r\n       -moz-filter: blur(10px);\r\n        -ms-filter: blur(10px);    \r\n            filter: blur(10px);\r\n    \r\n    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); \/* IE6~IE9 *\/<\/span>\r\n}<\/pre>\n<\/div>\n
\u81f3\u4e8eIE10, IE11\u6d4f\u89c8\u5668\uff0c\u9ad8\u4e0d\u6210\u4f4e\u4e0d\u5c31\u7684\u9e21\u808b\uff0c\u548b\u5c31\u4e0d\u8bf4\u4ec0\u4e48\u4e86\u5427~ \u5982\u679c\u4f60\u6267\u7740\u4e8e\u8fd9\u4e24\u5757\u9e21\u5927\u6392\uff0c\u53ef\u4ee5\u8bd5\u8bd5canvas<\/code>.<\/p>\n
canvas\u5927\u7edf\u6c5f\u5c71<\/h3>\n
Canvas\u4e2d\u7684\u6709\u4e2agetImageData<\/code>\u65b9\u6cd5\uff0c\u53ef\u4ee5\u83b7\u53d6\u6bcf\u4e2a\u56fe\u7247\u50cf\u7d20\u70b9\u7684\u4fe1\u606f\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u6839\u636e\u7279\u5b9a\u7684\u7b97\u6cd5\uff0c\u5bf9\u8fd9\u4e9b\u4fe1\u606f\u70b9\u8fdb\u884c\u8f6c\u5316\uff0c\u5c31\u80fd\u4f7f\u7528\u5404\u79cd\u56fe\u7247\u7279\u6548\u3002\u4f8b\u5982\uff0c\u7f6e\u7070\u6548\u679c\uff0c\u4f8b\u5982\u53cd\u5dee\u6548\u679c\uff0c\u6216\u8005\u662f\u4e00\u4e9b\u590d\u6742\u7684\u56fe\u50cf\u6df7\u5408\u6548\u679c\uff08\u7b97\u6cd5\u89c1\u4e0b\uff09\uff1a
\n\"\u5e38\u89c1\u7684\u56fe\u50cf\u6df7\u5408\u6a21\u5f0f\u7b97\u6cd5\u6548\u679c\"<\/a><\/p>\n
\u6216\u8005\u8fd9\u91cc\u8981\u4ecb\u7ecd\u7684\u6a21\u7cca\u6548\u679c\uff08\u9ad8\u65af\u6a21\u7cca\uff09\u3002<\/p>\n
\u5173\u4e8e\u201c\u9ad8\u65af\u6a21\u7cca\u7684\u7b97\u6cd5\u201d\u53ef\u4ee5\u53c2\u89c1\u962e\u8001\u5e08\u7684\u201c\u9ad8\u65af\u6a21\u7cca\u7684\u7b97\u6cd5<\/a>\u201d\u53c2\u8003\u8bd1\u6587\uff0c\u6d89\u53ca\u6b63\u6001\u5206\u5e03\u3002\u53ef\u89c1\uff0c\u5c31\u7b97\u662f\u641e\u8bbe\u8ba1\u7684\uff0c\u6216\u8005\u662f\u6298\u817eCSS, \u4e5f\u662f\u5bf9\u6570\u5b66\u5f88\u6709\u8981\u6c42\u7684\u54c8\u3002<\/p>\n
\u5bf9\u4e8ecanvas<\/code>\u7684\u9ad8\u65af\u6a21\u7cca\uff0c\u80af\u5b9a\u6709\u524d\u8f88\u5df2\u7ecf\u5199\u8fc7\u76f8\u5173\u7684\u65b9\u6cd5\u4e86\uff0c\u6211\u641c\u4e86\u4e0b\uff0c\u8fd9\u4e2aJS\u8fd8\u7b97\u86ee\u4e0d\u9519\u7684\uff0cStackBlur.js<\/a>\uff0c\u8be5JS\u7684\u539fdemo\u5730\u5740\u662f\uff1ahttp:\/\/www.quasimondo.com\/StackBlurForCanvas\/StackBlurDemo.html<\/a><\/p>\n
\u66f4\u65b0\u4e8e2021-07-22<\/strong>
\n\u4e0a\u9762\u7684\u5730\u5740\u5df2\u7ecf404\u4e86\uff0c\u53ef\u4ee5\u8bbf\u95ee\u8fd9\u4e2a\u9879\u76ee\uff1ahttps:\/\/github.com\/flozz\/StackBlur<\/a><\/p>\n
\u53ef\u4ee5\u5b9e\u73b0\u4efb\u610f\u5c40\u90e8\u9ad8\u65af\u6a21\u7cca\u3002<\/p>\n
\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5b9e\u73b0\u56fe\u7247\u7684\u9ad8\u65af\u6a21\u7cca\u6548\u679c\uff0c\u4e0d\u4f9d\u8d56\u5176\u4ed6\u4efb\u4f55JS\u6846\u67b6\uff0c\u4e00\u822c\u7528\u6cd5\u5982\u4e0b\uff1a<\/p>\n
\n
stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );<\/pre>\n<\/div>\n
\u5176\u4e2d\uff1a<\/p>\n