如何使用css模糊身体的背景颜色？ [复制]答案

【问题标题】：How to blur background color of body using css? [duplicate]如何使用css模糊身体的背景颜色？ [复制]
【发布时间】：2021-10-29 11:01:34
【问题描述】：

我已将背景颜色设置为线性渐变，并且希望背景颜色模糊。我尝试了一些代码，但无法使其工作。这是我的代码：

body{
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 200px; /* Make sure the body is visible */
    width: 200px;
}

<body>
</body>

我正在学习 CSS，请帮助我！提前谢谢！

【问题讨论】：

你想让整个页面，包括所有的文字都变得模糊吗？

标签： css

【解决方案1】：

只需将背景与正文分开设置，即您可以使用伪元素并仅过滤此伪

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    filter: blur(10px);
}

【讨论】：

【解决方案2】：

只需尝试添加filter: blur(8px);、-webkit-filter: blur(8px);。

代码：

body {
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

您可以通过将8px 更改为您想要的任何数字来增加模糊度。

例如10px:

filter: blur(10px);, -webkit-filter: blur(10px);.

通过MDN了解更多信息。

【讨论】：

这会模糊页面上的所有内容。
@disinfor 这不是 OP 想要的吗？
这个问题说的不够清楚。
谢谢，我得到了解决方案！！我想让身体的背景颜色变得模糊！

【解决方案3】：

您可以在body 上将渐变设置为伪元素并对其进行模糊处理：

body {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg, #3B53D6, #4AFAFA);
  filter: blur(5px);
  z-index: -1;
}

<body>
  <div>
    content content content
  </div>
</body>

如果你将filter: blur() 添加到body 中，那么所有的孩子也会变得模糊。

【讨论】：