简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to use transparent div to achieve page background blur effect
P粉908643611
P粉908643611 2023-09-14 21:09:28
0
1
441

I have the code for a web page, and I want to blur the background through a transparent div. I actually want to make the div semi-transparent.

I tried to add blur filter CSS to the div, but the result is that the text inside the div is also blurred, which is not what I want. 

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

reply all(1)
P粉394812277
P粉3948122772023-09-15 11:55:28 1 floor

Try the following, using CSS's backdrop-filter: blur property, and changing the opacity of background-color: 

<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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！