css模糊_如何使用CSS模糊图像？

css模糊

Introduction:

介绍：

Sometimes even the professional developers tend to forget the various basic properties which can be applied to solve very simple problems, therefore the fundamentals of developing a website or web page should be very clear and must be practiced thoroughly. This section is all about one such property which is used to deal with the most-used element on a website or web page.

有时，即使是专业的开发人员也往往会忘记可用于解决非常简单的问题的各种基本属性，因此开发网站或网页的基础应该非常清楚，并且必须彻底地实践。本节全部关于一个此类属性，该属性用于处理网站或网页上最常用的元素。

Trivia:

琐事：

Images are very interesting elements on any web page or website but to deal with them is equally critical and important as well. Images enhance the appearance of the web page or website, besides images attract many users and any user would love to see some images while visiting any website or web page. Images are used for reference for some piece of information, besides the images can be used to give a clear picture of what is being said in an article, blog, etc. Therefore to deal with such fundamental elements is of paramount importance. This section is about one such property which is widely used while dealing with the images, which is known as blur property in CSS.

图像在任何网页或网站上都是非常有趣的元素，但是处理它们同样至关重要，也很重要。图像增强了网页或网站的外观，图像吸引了许多用户，并且任何用户都希望在访问任何网站或网页时看到一些图像。图像可用于某些信息的参考，此外图像还可用于清晰地显示文章，博客等中所说的内容。因此，处理此类基本元素至关重要。本节是关于在处理图像时广泛使用的此类属性， 在CSS中称为模糊属性 。

Let us move forward and have a look at the definition below,

让我们继续前进，看看下面的定义，

Definition:

定义：

Since by looking at the name of the property it is quite obvious to know that what is the purpose of this property.

因为通过查看属性的名称，很明显知道该属性的目的是什么。

When the user needs to blur a specific image then this blur CSS property comes into play. The filter property is used to convert any image into a blurred image. Very basic property and very easy to implement. This property is used widely and proves to be of utmost importance to make a website or web page responsive.

当用户需要模糊特定的图像时，该模糊CSS属性就会起作用。 filter属性用于将任何图像转换为模糊图像 。非常基本的属性，非常容易实现。此属性被广泛使用，并被证明对于使网站或网页具有响应能力至关重要。

Syntax:

句法：

    Element{
filter:blur();
}

Where the user can specify the intensity of the blur effect that is used to blur the image.

用户可以在其中指定用于模糊图像的模糊效果的强度。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
filter: blur(4px);
}
</style>
</head>
<body>
<p>Apply a blur effect to the image below:</p>
<img src="img_forest.jpg" width="300" height="300">
</body>
</html>

Output

输出量

It is very clear by looking at the result of the example above that the image of the forest is blurred with 4px intensity.

通过查看以上示例的结果可以很清楚地看到，森林的图像以4px的强度模糊 。

Note: To use this property, you must ensure that you are using the value filter and then followed by the property blur(), otherwise the property would be rendered useless.

注意：要使用此属性，必须确保使用的是值过滤器 ，然后使用属性blur() ，否则该属性将变为无用。

Closing tips:

结束提示：

Since the property is very easy to implement and to understand but one must be very careful while using the blur property in CSS as this property can not be used on every image because if you make a relevant image as a blur then the user would not be able to see the content of that image.

由于该属性非常容易实现和理解，但是在CSS中使用blur属性时必须非常小心，因为此属性不能在所有图像上使用，因为如果将相关图像作为模糊对象，则用户不会能够看到该图像的内容。