用模糊覆盖两个div

Question

目前必须使用div容器。

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

-webkit-filter: blur(2px);

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

下图说明了这个问题。

更大容器div的CSS：

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

CSS里面的小div：

#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