相信很多小伙伴在写前端时都喜欢用图片做背景,尤其是下面这种背景图片搞模糊一些,让可视栏的内容更加突出。
那么我们该如何用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>
怎么样,你学会了吗?