如何使用透明的div实现页面背景模糊效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何使用透明的div实现页面背景模糊效果

P粉908643611 2023-09-14 21:09:28

[CSS3讨论组]

721

我有一个网页的代码，我希望通过一个透明的div来使背景模糊。我实际上想要使div半透明。

我尝试为div添加模糊滤镜的CSS，但结果是div内部的文本也被模糊了，这不是我想要的。

<body style="background-image: url('bg.jpg')">
  <div>
    Some text
  </div>
</body>

P粉908643611

全部回复(1)

P粉3948122772023-09-15 11:55:28 1楼

尝试以下操作，使用CSS的backdrop-filter: blur属性，并更改background-color的opacity：

<head>
  <style>
    body {
      background-image: url('bg.jpg');
    }

    .translucent-div {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      width: 300px;
      height: 200px;
      margin: 50px auto;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="translucent-div">
    一些文本
  </div>
</body>