A, Css Blur ()
blur() CSS Methods Gaussian blur applied to the output picture. Results <filter-function>.
blur(radius)
radiusBlur radius value <length>. It defines the standard deviation of the Gauss function, i.e., the number of pixels on a screen integrated with each other; thus, the larger value results in more blurred. A value of 0 will make the entries remain unchanged. The null value is zero.
blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */
Second, using the example:
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
2. Example:
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } </style> </head> <body> <p>图片使用高斯模糊效果:</p> <img src="pineapple.jpg" alt="Pineapple" width= "300" height = "300" > < the p- > < strong > Note: </ strong > Internet Explorer does not support the filter properties. </ P > </ body > </ HTML >
More:
Canvas fuzzy processing pictures, pictures of frosted glass processing stackblur.js
Web page picture frosted glass effect to achieve
Css3 text gradual consolidation (a)