模糊背景疊加圖像

我想模糊疊加在滑塊上的曲面形狀本身是一個圖像，其是透明的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％，覆蓋綠色造型也絕對位置這意味着當我們增加瀏覽器的頁面大小時，它會改變它的位置。

底線：我想模糊綠色形狀背後的內容。

來源

2014-02-13 Dot

我不知道我理解你的問題，你想用模糊時，在下拉菜單中是有活性的5個圓圈圖標的部分？ –

PFA我已經標記了iz綠色形狀的部分。滑塊圖像應該以綠色形狀模糊。和我的英語不好意思。 – Dot

只需添加-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); 
}

來源

2014-02-13 08:25:50 ducdhm

其實，我的滑塊是響應式的，它的寬度是100％，覆蓋綠色形狀也是絕對位置，這意味着當我們增加瀏覽器的頁面大小時，它會改變它的位置。底線：我想模糊綠色形狀背後的內容。 – Dot

模糊背景疊加圖像

回答

相關問題