模糊背景叠加图像

Question

我想模糊叠加在滑块上的曲面形状本身是一个图像，其是透明的PNG格式，我想使经由CSS3或jquery的或任何other.Help我效果出来 image here

这是我的代码

<div class="slider_overlay_menu"> 
    <div class="overlay_menu"> 
     <div class="banner_questions"> 
      <select style="width: 60%;"> 
       <option value="Career">Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</option> 
       <option value="Subject">Curabitur at erat ornare elit tristique porttitor eget at tellus ?</option> 
       <option value="Stream">Fusce laoreet, tortor quis mattis congue, enim lacus vulputate tellus ?</option> 
       <option value="Category">Ut imperdiet egestas purus non ultricies. Sed id aliquet magna ?</option> 
      </select> 
      <input type="submit" name="commit" value="Know How !"> 
     </div> 
    </div> 
</div> 

CSS

.slider_overlay_menu 
{ 
    float: right; 
    position:relative; 
} 


.slider_overlay_menu:before 
{ 
    -webkit-fliter:blur(5px); 
} 
.banner_questions 
{ 
    float:right; 
    width:825px; 
    text-align:center; 
    position:relative; 
    display:block; 
    margin-top:50px; 
} 

.overlay_menu input[type="submit"] 
{ 
    margin-left:30px; 
    vertical-align:middle; 
} 
.overlay_menu 
{ 
    position: absolute; 
    background: url('../images/banner_bg.png')no-repeat; 
    height: 155px; 
    overflow: hidden; 
    width: 1007px; 
    right: 0; 
    z-index: 99998; 
    bottom: 10px; 
    padding:2%; 
} 

其实，我的滑块响应，它的宽度是100％，覆盖绿色造型也绝对位置这意味着当我们增加浏览器的页面大小时，它会改变它的位置。

底线：我想模糊绿色形状背后的内容。

Answer 1

只需添加-webkit-filter属性.overlay_menu这样的：

.overlay_menu 
{ 
    position: absolute; 
    background: url('../images/banner_bg.png')no-repeat; 
    height: 155px; 
    overflow: hidden; 
    width: 1007px; 
    right: 0; 
    z-index: 99998; 
    bottom: 10px; 
    padding:2%; 
    -webkit-filter: blur(5px); 
}