Эффект размытия в IE11 для создания матового стекла - PullRequest
Новая
       10

Эффект размытия в IE11 для создания матового стекла

0 голосов
/ 02 мая 2018

Я пытаюсь имитировать внешний вид матового стекла: https://codepen.io/AmJustSam/pen/ModORY

чтобы выяснить, IE9 + не поддерживает фильтр: размытие (..

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

Это прекрасно работает в Firefox: 

.frost
{

    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    filter: blur(10px);
    overflow: hidden;
    background: inherit;
}

Но не IE11. Некоторые решения, с которыми я столкнулся при помощи svg, предназначены для размытия самого изображения. Как можно размыть фон, наследуемый div, с помощью svg, если это возможно?

Edit: Хотя предложенный дубликат мне не помогает, потому что он не изменяет унаследованный фон, а только накладывает поверх него изображение с помощью SVG. Кажется, что это может быть единственным решением. Так, используя пример из возможного дублированного ответа: 

svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>

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

...