如何在jQuery Mobile中覆盖面板后面变暗?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在jQuery Mobile中覆盖面板后面变暗?相关的知识,希望对你有一定的参考价值。
我从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;
}
答案
您只能将过滤器属性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):
以上是关于如何在jQuery Mobile中覆盖面板后面变暗?的主要内容,如果未能解决你的问题,请参考以下文章
如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?
Jquery mobile 1.4.5 可以设置面板高度吗?
在jquery mobile中打开面板时如何防止页面被拖动?