CSS如何将图像转换为模糊图像？

在CSS中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。

语法：

filter: blur()

属性值：

●　blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

示例１：使用filter: blur()来模糊图像

原图：

<!DOCTYPE html>

<html>

	<head>

	   	<meta charset="UTF-8">

	   	<style>

            img {

                -webkit-filter: blur(4px);

                filter: blur(4px);

            }

            h1 {

                color:green;

            }

        </style>

	</head>

<body>

    <center>

        <img src= "1.jpg" width="500px" alt="filter applied" />

        </center>

    </body>

</html>

效果图

示例2：创建背景模糊图像

<!DOCTYPE html>

<html>

	<head>

	   	<meta charset="UTF-8">

	   	<style>

            img {

                -webkit-filter: blur(4px);

                filter: blur(4px);

                margin-top: 20px;

            }

            h1 {

                color:red;

            }

            .backgr-text {

                position: absolute;

                top: 20%;

                left: 50%;

                transform: translate(-50%, -50%);

                text-align: center;

            }

        </style>

	</head>

<body>

    <center>

        <img src= "1.jpg" width="500px" alt="filter applied" />

        <div>

                <h1>Hello World</h1>

                <h2>Blurred Background Image</h2>

            </div>

        </center>

    </body>

</html>

巴特西

CSS如何将图像转换为模糊图像？

最新文章

热门文章