如何从CSS中的滤镜blur()中去除屏幕周围的阴影？

Question

如何删除屏幕周围的阴影？？？ 滤镜模糊会产生这个阴影

      &::before {
        content: "";
        position: absolute;
        background: linear-gradient(to right, rgba(11, 11, 11, 0.766), rgba(11, 11, 11, 0.766)) , url('/Obrazek\ 1.jpeg');
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-color: black;
        filter: blur(20px);
      }

我尝试使用背景滤镜，但它不起作用

Answer 1

使用

backdrop-filter

或负缩进过滤块：

body {
  position: relative;
  background: linear-gradient(to bottom, blue,yellow);
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 16px;
  margin: 0;
}

body:after {
  content: '';
  position: absolute;
  background: rgba(11, 11, 11, 0.2);
  inset: 0;
  backdrop-filter: blur(2px);
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, corporis, eos, eaque ex ad porro provident vel iusto dolor accusamus quo dolore animi odit dolorum vero aspernatur magnam rerum hic optio illum est soluta deserunt maiores in ut. Voluptatibus, quod, et, quae quas asperiores quis id rerum molestias reiciendis exercitationem magnam ipsam iusto atque doloremque recusandae laboriosam eveniet voluptatum cumque ipsum est! Perferendis, cupiditate, architecto a cumque libero nihil ut in modi iste magnam fugit porro nulla cum qui ab!