设置background-image的blur效果后页面所有元素均被模糊问题求助

问题根因 #

filter 为可继承属性，如果你之前将背景图和模糊效果设置在包裹了文字、按钮等内容的父容器（如body、.aio）上，容器内所有子元素都会继承模糊效果，导致所有页面元素都被模糊。

解决方案 #

抽离独立的背景层，与内容层平级，模糊效果仅作用在背景层，通过z-index控制层级让背景层在内容下方，不会影响上层内容清晰度。

修改后完整HTML代码 #

<!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">
  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- 新增独立背景层 -->
 <div class="bg-blur"></div>
 <div class="trbp"><button class="trb">sign up</button></div>
 <div class="aio">
  <h2 class="btp">welcome to</h2>
  <h2 class="bth">our site</h2>
  <button class="blb">about us</button>
 </div>
 <script src="main.js"></script>
</body>
</html>

修改后完整CSS代码 #

/* 独立背景层样式 */
.bg-blur {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 15pt;
    width: 500px;
    height: 500px;
    background-image: url("bto.jpg");
    filter: blur(8px);
    z-index: -1;
}
.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}
.btp{
  position: relative;
  top: 120px;
  left: 30px;
}
.bth{
  position: relative;
  top: 100px;
  left: 30px;
}
.blb{
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

如果需要背景铺满整个页面，将.bg-blur的width和height属性值改为100%即可。

内容的提问来源于stack exchange，提问作者Khaled