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

Posted 2023-05-08

【中文标题】如何在 jQuery Mobile 中使覆盖面板后面变暗？

【英文标题】：How do I darken behind my overlay panel in jQuery Mobile?

【发布时间】：2019-02-14 19:44:05

【问题描述】：

我已从 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;

【问题讨论】：

在菜单下添加一个填充整个视口的 div。使用 RGBA 设置其背景颜色或添加opacity: 0.5。

也许检查一下你的模糊是否也是跨浏览器的。 -webkit-filter：模糊（5px）； /* Safari 6.0 - 9.0 */ filter: blur(5px);

【参考方案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）：

【讨论】：

我不知道 filter 属性，谢谢分享。您的回答很有魅力，非常感谢！