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

【问题标题】：Remove dark border around filter blur css删除过滤器模糊css周围的暗边框
【发布时间】：2020-01-07 07:47:45
【问题描述】：

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

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

我怎样才能删除它？

White blur around image when using CSS3 blur filter?

我正在寻找一种不包括像上面那样增加 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%;
    }

<body>

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

</body>

【问题讨论】：

你试过 'border:none' 属性到 div 吗？
这是因为你的背景颜色是黑色的，与浅色的图像形成对比。尝试将背景颜色设置为白色。
理论上是的，你是对的，但我想将其应用于无法更改背景颜色的一系列情况

标签： css

【解决方案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%;
}

<body>

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

</body>

【讨论】：

【解决方案2】：

到具有黑色 (#000) 背景的 body 合并到图像中。要更改此设置，您可以为包含图像的 <div> 赋予白色 (#fff) 背景。

请注意，在这种情况下，白色会合并到图像的边缘，形成白色边框，您可能会接受也可能不会接受。

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

div {
  width: fit-content;
  height: fit-content;
  object-fit: contain;
  border: none;
  overflow: hidden;
  background: #fff;
}

img {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  width: 100%;
}

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

【讨论】：

【解决方案3】：

不是模糊div，而是模糊img并将img缩放到1.1

这种方式不会产生任何软“边框”

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

div {    
    width: fit-content;
    height: fit-content;
    object-fit: contain;
    border: none;
    overflow: hidden;
    }
    
    img {
      -webkit-filter: blur(3px);
      -moz-filter: blur(3px);
      -o-filter: blur(3px);
      -ms-filter: blur(3px);
      filter: blur(3px);
      width: 100%;
      transform: scale(1.1)
    }

<body>

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

</body>

【讨论】：

【解决方案4】：

尝试使用父容器、稍大的图像尺寸和负边距。红色边框仅用于说明目的，可以去掉。

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

.blur_img {
    box-sizing: border-box;
    border: 1px solid #f00;
    object-fit: contain;
    overflow: hidden;
}
    
.blur_img img {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  margin: -6px;
}

<body>

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

</body>

【讨论】：