原来css实现图片模糊这么简单

相信很多小伙伴在写前端时都喜欢用图片做背景,尤其是下面这种背景图片搞模糊一些,让可视栏的内容更加突出。

 那么我们该如何用css实现图片的模糊处理呢?其实很简单,只需用到css3里的fliter: blur()函数即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <img src="pic.png" alt="">
</body>

</html>

 怎么样,你学会了吗?

猜你喜欢

转载自blog.csdn.net/weixin_62588253/article/details/130032114