删除过滤器模糊 css 周围的暗边框

Question

删除过滤器模糊 css 周围的暗边框

我遇到了问题，经过大量搜索后找不到任何解决方案。

我正在使用 css 过滤器：在 div 上模糊，但它会创建深色边框，几乎就像 div 周围的小插图

我怎样才能删除这个？

我正在寻找一个不包括像上面那样增加 div 规模的解决方案

body {
  margin: 0;
  padding: 0;
  background: #000;
}

div {

-webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    
    width:100vw;
    height:100vh;
    object-fit: contain;
    border:none;
    
    }
    
    img {
      width: 100%;
    }

Run Code Online (Sandbox Code Playgroud)

<body>

<div>
  <img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>

</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ped*_*ram 1

解决方案：css当您使用深色背景颜色时，这是元素上模糊的正常行为，在本例中您使用了黑色背景，所以当您使用时blur会发生这种情况！为了避免这种情况，你应该做一个技巧，transform: scale在你的图像上使用并让父母overflow: hidden有一定的width和height

body {
  margin: 0;
  padding: 0;
  background: #000;
}

#pic img {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  object-fit: contain;
  transform: scale(1.1);
}

#pic {
  width: 100vw;
  height: 100vh;
  overflow: hidden
}

img {
  width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<body>

  <div id="pic">
    <img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
  </div>

</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	3307 次
最近记录：	5 年，11 月前