Question

我希望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>
 -->

Answer 1

尝试将['$http','$q',function ($http,$q) {添加到其容器（您的案例中为overflow:hidden;类）。这将隐藏溢出其容器的子元素的每个部分

如何设置具有锐边的模糊背景图像？

1 个答案: