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

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

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

Примечание:div имеет фиксированное положение и фоновые прокрутки. Фон это смесь текста и фотографий.

10
css css-filters html image-processing transparency

6 ответов

в 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 filter. 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

в JavaScript

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

23

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

8

вы заставили меня захотеть попробовать, поэтому я сделал, проверьте пример здесь:

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

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

  1. HW ускоренные CSS фильтры
  2. JS для присвоения класса и событий со стрелками
  3. изображения CSS Clip property
2

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

1

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

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

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

1

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

идея заключается в двух рендерингах сайта. Один из них-версия заголовка, которая размыта. Другой-тело. Я использовал Famous / Angular и использую templating для рендеринга шаблон в голове и теле. Заголовок нуждается в смещении для высоты заголовка, чтобы все совпадало. У меня скоро будет фактический код, размещенный здесь и на сайте.

-2