Как создать эффект матового стекла с помощью CSS?

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

Единственное, что я могу сделать, это отрегулировать opacity: 0.9, но я не могу размыть содержимое, которое находится под div.

Примечание. div имеет фиксированное положение и фоновые прокрутки. Фон, который scolls представляет собой сочетание текста и фотографий.

Ответы

Ответ 1

CSS

CSS 3 имеет фильтр размытия ( только webkit на момент ноябрь 2014):

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 поддерживает нестандартный фильтр

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

Посмотрите неплохую демонстрацию для размытия и других фильтров здесь

webkit CSS filter blur example

В дальнейшем для справки приведена таблица совместимости для фильтра CSS. Кажется, Firefox получает эту функцию в v35 +, хотя даже IE11, похоже, не имеет совместимости.

SVG

Альтернативой является использование svg (безопасно для IE9 и выше):

filter: url(blur.svg#blur);

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

jsFiddle Demo

Javascript

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

Ответ 2

Вы можете использовать фильтр изображений CSS. 

-webkit-filter: blur(2px);
filter        : blur(2px);

Дополнительная информация о фильтрах изображений CSS:

Демо: JSFIDDLE Blur filter exemple

Но на самом деле они используют предварительно обработанный JPG и просто используют его в качестве наложения в правильном положении.

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

Демо: JSFIDDLE CSS blur technique

Ответ 3

Вы заставили меня попробовать, так что я сделал, посмотрите здесь пример:

http://codepen.io/Edo_B/pen/cLbrt

Использование:

  • HW Ускоренные фильтры CSS
  • JS для присвоения классов и событий со стрелкой
  • Изображения Свойство CSS Clip

Что это.

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

Ответ 4

Просто поместите то же изображение (или его части) с непрозрачностью .9 несколько пикселей влево/вправо/вверх/вниз - voilà

Ответ 5

В будущем это будут ближайшие браузеры в виде CSS-фильтра с именем backdrop-filter. В настоящее время практически нет поддержки для этого. Для поддержки браузера см.: http://caniuse.com/#feat=css-backdrop-filter

Этот фильтр CSS сделает матовое стекло без какого-либо смешного дела или взлома. Он просто сделает это.

Кто-то записал демо-версию на Vine, и это выглядит действительно хорошо. Они использовали Safari каждую ночь, чтобы получить доступ к фильтру CSS. https://vine.co/v/OxmjlxdxKxl

Ответ 6

Прежде всего OP указывает, что фоновые свитки. Ни один из доступных ответов действительно не позволяет прокручивать. Исходя из того, как html настроен, это невозможно. Но с использованием знаменитого / angular для достижения этого эффекта можно использовать несколько движков рендеринга. Я построил здесь.

Идея этого - две визуализации сайта. Первая - это версия заголовка, которая размыта. Другой - тело. Я использовал Famous/ angular и использовал шаблон для визуализации шаблона в голове и теле. Для заголовка требуется смещение высоты заголовка, чтобы все соответствовало. Я буду иметь фактический код, размещенный вскоре здесь и на сайте.