Как применить фильтр размытия CSS 3 к тексту или изображению для Internet Explorer или IE 11

Я попытался, под фильтром в моем CSS, чтобы размыть текст, но он работает на Chrome, Mozilla & Только Safari. Я хочу, чтобы это работало и на IE 11. Можете ли вы предложить любую альтернативу?Как применить фильтр размытия CSS 3 к тексту или изображению для Internet Explorer или IE 11

Я не хочу применять Решение StackBlur, так как это сильно помешает работе, у меня есть много мест для размытия на одной странице.

.blurry-text { 
text-shadow: 0 0 5px rgba(255, 255, 255, 0.00); 
-webkit-filter: blur(5px); 
background: filter: url('/media/blur.svg#blur'); 
filter: blur(5px); 
filter: progid: DXImageTransform.Microsoft.Chroma(color=#333333), progid: DXImageTransform.Microsoft.MotionBlur(strength=0, direction=0), progid: DXImageTransform.Microsoft.Blur(pixelradius=5); 
color: transparent; 
}

источник

2016-09-23 Dhrubo

К сожалению размытости не щеголял на IE. Посмотрите [здесь] (http://caniuse.com/#search=filter%3A%20blur). Я думаю, что единственным решением является использование [StackBlur] (https://github.com/flozz/StackBlur) – ciurciurek

@ciurciurek okay, спасибо за ваш комментарий и ссылку. Но, если я использую реализацию StackBlur для своей страницы, где мне нужно применить это для более чем 50 мест, и число может увеличиться. Поэтому я действительно беспокоюсь о проблемах с производительностью. Я думаю, что после проверки наличия IE-механизма я могу поместить либо уже размытое изображение поверх этой области, либо применить эффект StackBlur один раз и применить его для всей области. Хотя, это было бы не на сто процентов точнее от размытой перспективы. Любое другое мнение? – Dhrubo

Я не знаю, что вы делаете, но, может быть, вы можете подумать о другой логике для IE. Например, замените акции размытыми запасами. К сожалению, я не задаю конкретного ответа на вопрос. Удачи! – ciurciurek

Вы можете сделать фильтр размытия, используя SVG гауссово размывание! Работает с modern browsers.
Контроль интенсивности размытия от stdDeviation="4"

Demo

See also

<div class="container" style="height: 613px;"> 
 
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591"> 
 
     <filter id="blurMe"> 
 
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" /> 
 
     </filter> 
 
     <image filter="url(#blurMe)" xlink:href="http://static1.squarespace.com/static/56d70b042b8dde104d998bda/t/56d9b7e827d4bdab535a3af8/1457109282817/kiddos.jpg?format=1500w" x="0" y="0" height="100%" width="100%"/> 
 
    </svg> 
 
</div>

источник

2016-09-23 07:08:08

Как применить фильтр размытия CSS 3 к тексту или изображению для Internet Explorer или IE 11

ответ

Смежные вопросы