为什么使用这个CSS屏幕边缘不会模糊

问题描述 投票：0回答：1

当我使用这个

css
来模糊背景图像并向其添加径向渐变时，我不想模糊其中的元素：

body {
  background: radial-gradient( 50% 50% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%), url("https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0px;
}

body::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: inherit;
  filter: blur(8px);
  z-index: -1;
}
<body></body>
这是代码笔的链接

屏幕边缘不模糊/它们是透明的（看图像： 带有卡米伦的背景图像， 没有背景图像的背景图像）

我知道模糊会导致问题，因为当我删除它时，边缘看起来很好。

我尝试增加主体/主体本身的

::before
的宽度，添加一个
z-index
为-2的div并为其添加颜色。

html css blur
1个回答
0
投票

这是我问题的答案，您需要在 body/body::before 中添加负边距

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.