Размытие фона изображение наложения

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%, а зеленая форма наложения также положение абс olute, что означает, что когда мы увеличиваем размер страницы браузера, он меняет ее положение.

Нижняя линия: Я хочу размыть содержимое за зеленой формой.

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); 
}