Css设置毛玻璃

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>狂三</div>
</body>
</html>

CSS

body{
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605244804728&di=1e7d1a9e5bd84e0f9daf6130cc7bb125&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201402%2F09%2F20140209164039_ryywz.jpeg);
background-position: center;
background-size:cover;
background-attachment: fixed;
background-repeat:no-repeat;
}
div{
  position:relative;
  margin:100px auto;
  width:200px;
  height:200px;
  overflow:hidden;
}
div::before{
  position: absolute;
  content:'';
  width:200px;
  height:200px;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605244804728&di=1e7d1a9e5bd84e0f9daf6130cc7bb125&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201402%2F09%2F20140209164039_ryywz.jpeg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  filter:blur(10px);
  z-index:-1;
}

 

 

posted @ 2020-11-13 11:23  SongPF  阅读(169)  评论(0)  编辑  收藏  举报