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

问题描述

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

我正在使用 css filter: blur on a 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%;
    }

<body>

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

</body>

标签： css

解决方案：当您使用深色背景颜色时，这是一种正常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>

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

问题描述

解决方案

推荐阅读