如何设置边缘清晰的模糊背景图像？答案

【问题标题】：How to set a blurry background image with sharp edges?如何设置边缘清晰的模糊背景图像？
【发布时间】：2017-10-31 07:18:34
【问题描述】：

我想要一个 div 容器的模糊背景图像。但是如果我设置模糊滤镜，边缘也会变得模糊，导致模糊图像溢出它的框架。这是我到目前为止所尝试的：

.one {
  height: 400px;
  width: 400px;
  border: 1px solid black;
  /* background-image: url("https://i.imgur.com/JCyxUxA.jpg"); */
/* 	background-repeat: no-repeat;
	background-position: center;
	  background-size: contain;
	 */}

.a {
  background-image: url("https://i.imgur.com/JCyxUxA.jpg");
}

.b {
  background-image: url("https://i.imgur.com/O1jVhYH.jpg");
}

.thing {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.bl {
  filter: blur(20px);
}

<div class="one t">
  <img class="thing" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>  
<div class="one t">
  <img class="thing bl" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>  
<!-- <div class="one a">
</div>
<div class="one b">
</div>
 -->

【问题讨论】：

标签： html css

【解决方案1】：

尝试将overflow:hidden; 添加到其容器中（在您的情况下为one 类）。这将隐藏溢出其容器的子元素的每个部分

【讨论】：

不起作用。模糊后的图像不会溢出两侧的容器。
您可以在您的 img 周围使用另一个 div 来解决这个问题，并使用您需要的宽度和高度
正如@Damiano 所说，overflow 解决您的问题。你期待什么？
@Damiano 问题是，我事先不知道包装 div 的大小应该是多少。背景图像应该只是填充容器。它可能会受到宽度或高度的限制，具体取决于它是横向还是纵向。