如何使用css模糊车身背景色？[副本]

9ceoxa92 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(112)

此问题已在此处有答案：

How to apply a CSS filter to a background image（22答案）
1年前关闭。
我已经设置了一个线性梯度的背景颜色，我希望背景颜色是一个模糊。我试了几个代码，但不能使它工作。下面是我的代码：

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

来源：https://stackoverflow.com/questions/68988409/how-to-blur-background-color-of-body-using-css

3条答案

按热度按时间

qzwqbdag1#

只需尝试添加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。

赞(0）回复(0）举报 2023-06-25

wlzqhblo2#

只需将背景与主体分开设置，即你可以使用一个pseudo元素并过滤这个pseudo元素。

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);
}

赞(0）回复(0）举报 2023-06-25

neekobn83#

您可以在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()添加到正文中，那么所有的子元素也会变得模糊。

赞(0）回复(0）举报 2023-06-25

我来回答

如何使用css模糊车身背景色？[副本]

3条答案

相关问题

热门标签

最新问答