如何在jQuery Mobile中覆盖面板的后面变暗？

Question

我从jQuery Mobile网站上获取了面板代码，并将其合并到我的文件中。 我想使面板后面的内容变暗或模糊。我尝试使用filter:blur(5px)，但无济于事。我使用的语法正确吗？请查看图片以获取所需的结果。

HTML：

<!-- Subheader --> 
        <div data-role="header" class="subheader" data-position="fixed">
            <a href="#filterPanel" class="ui-btn-right" >Filter</a>
            <div class="subheadertext">Available job opportunities...</div>
        </div>

            <!-- Subheader Filter Panel -->
            <div data-role="panel" id="filterPanel" data-display="overlay" data-position="right">
                <p>This will be the filter panel</p>
            </div>

CSS：

/* Subheader Filter Panel */

#filterPanel {
    background-color: #99c5cc;
    color: white;
    text-shadow: none;
}

Answer 1

您只能将过滤器属性blur（）应用于图像或SVG：https://www.w3.org/TR/filter-effects-1/#funcdef-blur

在这种情况下，您想模糊HTML内容，最好的办法是对位于内容上方的元素应用不透明度。在打开侧面板时查看jQuery mobile，实际上提供了这种类型的覆盖。

尝试将此CSS添加到您的项目中

.ui-panel-dismiss-open {
  background: rgba(0, 0, 0, 0.8) !important;
}

在jQuery Mobile网站上查看其工作的屏幕截图（请注意控制台中的CSS）：