CSS3图片模糊 blur()方法


Blurs an element, for use by the filter property. Accepts a distance measurement within which pixels are randomly scattered. A value of 0 leaves the image as is.

This CSS property value is reflected in the following image:

filter: blur(10px);

f21-peppers2.jpg f22-peppers2blur.jpg

Note that pixels blur around the contours of image transparencies, possibly affecting the ability of background content to show through:

music blur.png


There is no data available for topic “css”, feature “blur”. If you think that there should be data available, consider opening an issue.


View live exampleThe following example shows the difference between two images, where one has a blur of 10px:

filter blur.png


<!DOCTYPE html>
    <title>Blur example</title>
      .foo {
        float: left;

      .bar {
        -webkit-filter: blur(10px);
    <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png&quot; class="foo" />
    <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png&quot; class="foo bar" />

You may also like...