javascript - 模糊背景叠加图像

Question

我想模糊覆盖在 slider 上的 flex 形状，它本身是一个透明的 png 格式的图像，我想通过 css3 或 jquery 或任何其他方式产生效果。帮帮我 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%;
}

实际上，我的 slider 是响应式的，它的宽度是 100%，覆盖的绿色形状也是绝对位置的，这意味着当我们增加浏览器的页面大小时，它会改变它的位置。

底线:我想模糊绿色形状后面的内容。

Answer 1

只需为 .overlay_menu 添加 -webkit-filter 属性，如下所示:

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