CSS3/HTML 5/PNG размытие содержимого за элементом - программирование
Подтвердить что ты не робот

CSS3/HTML 5/PNG размытие содержимого за элементом

Я пытаюсь размыть содержимое за заголовком фиксированной позиции, чтобы содержимое, находящееся за ним, зависало, когда за этим div отключены пользовательские прокрутки.

Раньше я делал это с простой непрозрачностью в CSS, но это не синее содержимое, содержащее DIV, просто накладывает перед ним полупрозрачную панель.

Есть ли простой способ, даже если это мошенничество в достижении того, что я хочу. Независимо от того, используете ли вы фоновое изображение PNG или в CSS.

Посмотрите, как iOS7 делает это http://www.apple.com/ios/ios7/features/.

4b9b3361

ОТВЕТЫ

Ответ 1

В 2015 году Apple анонсировала Safari 9, которая поддерживает новую функцию CSS, backdrop-filter. Использование этого правила CSS для вашего div применяет фильтры только к элементам позади него:

#myDiv {
    backdrop-filter: blur(10px);
}

example

Эта функция в настоящее время доступна только в Safari (и для нее требуется префикс -webkit), поэтому я не рекомендую использовать ее сейчас. Если вы это сделаете, обязательно используйте @supports или/и JS, чтобы реализовать резерв для браузеров, которые еще не поддерживают его:

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

Здесь таблица совместимости на caniuse.com, а также Chromium и Firefox.

Подробнее о что нового в Safari.

Ответ 2

С небольшой манерой HTML5 и JavaScript ответ да:

http://jsfiddle.net/nallenscott/WtQjY/41/

Человек соломы:

<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            <!-- content-->

        </article>
    </section>
</body>

Вам понадобится jQuery, Stackblur и html2canvas.

  • Дублируйте область содержимого и преобразуйте ее в холст.
  • Переместите холст в заголовок.

  • Синхронизируйте прокрутку содержимого с холстом в заголовке.

    html2canvas создает холст, Stackblur создает гауссовское размытие на холсте, а элемент заголовка накладывается на разделитель .blurheader для имитации полупрозрачности.

Если вам нравится JavaScript, то это, возможно, стоит исследовать дальше. Он поддерживает последние версии IE, Chrome, Safari и Firefox и позволяет изящные варианты резервного копирования для устаревших браузеров.

Приветствия.

Ответ 3

Это действительно сложно. Прямо сейчас вы не можете сделать это так, как это делает iOS, поскольку вы можете либо размыть, либо не размыть элемент. Вы не можете просто размыть его часть.

Вы можете использовать фильтр размытия Webkit для других элементов, но это не совсем хорошо.

Довольно хороший способ использования:

*:not(.unblurred) {
 -webkit-filter: blur(1px);
}

Но это практически не идеально почти в каждом случае.

CSS Custom Shaders, скорее всего, перспективны, поскольку, возможно, использование -moz-element в качестве фона, но сейчас ответ в основном является "удачей".

Попробуйте http://iamvdo.me/conf/2012/kiwiparty/#/33 в Firefox (щелкните в любом месте), чтобы увидеть эффект -moz-element. Это неплохо, но поддержка ограничена, и она очень медленная.

http://codepen.io/simurai/pen/dFzxL показывает демо, что неплохо, но полагается на наличие фонового изображения, которое известно заранее.

http://webdirections.org/demos/translucency/index.html - это еще одна демонстрация, которая неплоха. Учебное пособие http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/

Ответ 4

Нет, вы все равно не можете размыть контент под чем-то, вам нужно размыть элемент.

Ответ, который вы ищете, в этом вопросе Размытие Img и Div в HTML с помощью CSS

Ответ 5

Способ сделать это без < холста > является:

  • Создайте глубокий клон поддерева, который содержит частично заблокированные элементы.
  • Размыть клон и поместить его так, чтобы он складывался поверх исходного поддерева.
  • Скопируйте клон в блокирующий элемент.
  • Закрепите исходное поддерево в областях вне элемента блокировки (используя клип-путь).

Я экспериментирую с этим методом здесь. Код, который делает это, в основном здесь.

Некоторые из недостатков:

  • Если вы измените видимость элементов или измените DOM, вам нужно обновить клоны.
  • Это может сделать прокрутку немного вялой.
  • Клоны частично заблокированных элементов должны быть написаны одинаково для этого.