如何模糊背景主体？ [复制]答案

【问题标题】：How to blur background body? [duplicate]如何模糊背景主体？ [复制]
【发布时间】：2020-11-27 02:26:29
【问题描述】：

我想制作一个全局模糊背景，因此我将 background-image 设置为标签，然后我创建了一个模糊滤镜属性，但结果证明它没有用。图像保持不模糊。怎么模糊？

body{
background-image: url(676685.jpg);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

}

【问题讨论】：

标签： html css

【解决方案1】：

不要在 body 元素中添加 filter: blur。它会使体内的一切都变得模糊。

如果您没有 bg 图像的模糊版本，则需要创建一个在屏幕上伸展的单独容器元素，将背景图像附加到该元素并添加模糊滤镜。

然后您的实际内容应放置在显示在 bg 容器顶部的单独容器中。

【讨论】：

【解决方案2】：

希望这能帮到你！！

body, html {
  height: 100%;
    background-image: url("https://cdn.britannica.com/24/174524-050-A851D3F2/Oranges.jpg");
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

* {
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


</body>
</html>

【讨论】：

【解决方案3】：

您可以将背景图像和过滤器应用于主体上的伪元素。我建议您对 img 标签而不是 body 本身应用模糊。

    body:before {
    content: "";
    position: absolute;
    background: url(676685.jpg);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}

【讨论】：

谢谢你，它工作！