CSS: Обход проблемы для фильтра-фильтра?

Question

backdrop-filter - это недавняя функция css, которая пока недоступна в современных браузерах (по крайней мере, с 1 июля 2016 года).

• Хром 51 поддерживает backdrop-filter через Экспериментальный флаг веб-платформы.
• Safari 9.1 поддерживает его с --webkit- префиксом
• Firefox 47 не имеют поддержки

Находясь в таком нерабочем состоянии, я хотел бы знать, существует ли какой-либо альтернативный способ привести в тот же результат.

JS обходные пути для размытия, оттенки серого, ... также приветствуются

Развитие backdrop-filter можно отслеживать через https://bugs.chromium.org/p/chromium/issues/detail?id=497522

Answer 1

Вы могли бы попытаться добавить различные фильтры для фоновых изображений:

https://css-tricks.com/almanac/properties/f/filter/

Ошибка в этом, заключается в том, что он работает только с изображениями.

В принципе, есть 10 встроенных фильтров для свойства CSS filter:

• размытия (пикс)
• яркости (%)
• контраст (%)
• раскрывающихся тень (ч-тень V-тень размытия распространения цвет)
• полутоновой (%)
• цветового тона поворота (град)
• инвертный (%)
• Непрозрачность (%)
• насыщение (%)
• сепия (%)

И кроме того, вы можете предоставить ему URL-адрес, которым содержит файл XML с appropariate фильтр.

Answer 2

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

Этот эффект может быть осуществлен следующим образом с CSS псевдо-классами, нет JavaScript не требуется! показано ниже:

body, 
 
main::before { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0/cover fixed; 
 
} 
 

 
main { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    padding: 10px 5px; 
 
    background: hsla(0, 0%, 100%, .3); 
 
    font-size: 20px; 
 
    font-family: 'Lora', serif; 
 
    line-height: 1.5; 
 
    border-radius: 10px; 
 
    width: 60%; 
 
    box-shadow: 5px 3px 30px black; 
 
    overflow: hidden; 
 
} 
 

 
main::before { 
 
    content: ''; 
 
    margin: -35px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    filter: blur(20px); 
 
    z-index: -1; 
 
}

<main> 
 
    <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45; 
 
    even those we love. Because we see things so often, we see them less and less." 
 
    <footer>&mdash; 
 
     <cite> 
 
     Joseph B. Wirthlin 
 
     </cite> 
 
    </footer> 
 
    </blockquote> 
 
</main>

Живой пример можно увидеть на Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Быстрый Примечание:

В зависимости от вашего уже изложены структура сайта, ваш Z-индекс может отличаться от описанного в exa mple.

Answer 3

Я использую это, чтобы получить популярный эффект матового стекла. Пока кто-то успешно не придумывает хороший polyfill для backdrop-filter я использую слегка прозрачный фон в качестве запасного варианта:

/* slightly transparent fallback */ 
.backdrop-blur { 
    background-color: rgba(255, 255, 255, .9); 
} 

/* if backdrop support: very transparent and blurred */ 
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) { 
    .backdrop-blur { 
    background-color: rgba(255, 255, 255, .5); 
    -webkit-backdrop-filter: blur(2em); 
    backdrop-filter: blur(2em); 
    } 
} 

Фильтр будет работать в currently supported браузерах. (Safari и Chrome с возможностями экспериментальной веб-платформы включены) Код должен также работать в будущих браузерах, которые поддерживают unprefixed backdrop-filter, если спецификация не изменится до этого.

Примеры без и с поддержкой фон фильтра: