javascript - 用模糊覆盖两个div

Question

目前必须划分容器。

我的第一个 div 容器有一个背景图像，我在其中模糊了图像以提供我需要的效果。

-webkit-filter: blur(2px);

但是当我尝试创建一个较小的 div 来覆盖模糊的 div 时，它们都被模糊了，而我只希望较大的容器 div 被模糊。

下图说明了这个问题。

较大容器 div 的 CSS:

 #banner { 
  width:100%; 
  max-width:1400px;
  height:350px; 
  background-image:url('banner.jpg'); 
  -webkit-filter: blur(2px);
  overflow:hidden;
 }

内部较小的 div 的 CSS:

#screen {
  width:450px; 
  height:300px; 
  border-radius:3px ;
  background-color:#999; 
  margin:20px; 
}

Answer 1

只需单独放置 DIV。这应该是您正在寻找的:

#banner {
  position: absolute;
  width:100%; 
  max-width:1400px;
  height:350px; 
  background-image:url('http://tny.im/2sm');
  -webkit-filter: blur(2px);
  overflow:hidden;  
}

#screen {
  position: absolute;
  width:450px; 
  height:300px; 
  border-radius:3px ;
  background-color: rgba(0,0,0,.5); 
  color: white;
  padding: 10px;
  margin:20px;  
}

working demo