Как затемнить за панелью наложения в jQuery Mobile? - PullRequest
Новая
       8

Как затемнить за панелью наложения в jQuery Mobile?

0 голосов
/ 10 сентября 2018

Я взял код панели с сайта 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;
}

enter image description here

1 Ответ

0 голосов
/ 10 сентября 2018

Вы можете применить только свойство фильтра 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 в консоли):

enter image description here

...