美文网首页
css实现模糊效果

css实现模糊效果

作者: Frank_Fang | 来源:发表于2021-05-17 19:04 被阅读0次
<!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>
</head>

<body style="margin: 20px;">
  <div style="background-image: url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'); background-size: cover; width: 600px; height: 1200px;">
    <div style="position: fixed; top: 20px; right: 10px; left: 20px; width: 600px; height: 400px; backdrop-filter: saturate(180%) blur(10px);"> Mask层 </div>
  </div>
</body>

</html>
Snipaste_2021-05-17_19-03-52.jpg

相关文章

网友评论

      本文标题:css实现模糊效果

      本文链接:https://www.haomeiwen.com/subject/detsjltx.html