Làm mờ CSS trong IE 11

Tôi đã cố gắng để có được hiệu ứng làm mờ css trong IE 11 trong nhiều giờ và không thực hiện bất kỳ tiến bộ nào. Tôi đã cố gắng sử dụng html đơn giản sau:Làm mờ CSS trong IE 11

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      .blur{ 
       -ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50'); 
      } 
     </style> 
    </head> 
    <body> 

     <img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" /> 
    </body> 

</html>

Tôi cũng đã thử chỉ sử dụng bộ lọc không có tiền tố ms. Tôi thấy rằng mã bộ lọc trên http://jsbin.com/ulufot/31/edit và thậm chí tham khảo ví dụ microsoft http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm không hoạt động trong IE 11 của tôi trên Win7. Bạn có bất kỳ ý tưởng, những gì tôi có thể doint sai?

lẽ thú vị nếu bạn đang gặp khó khăn quá: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

Nguồn

2014-09-15 Geru

Theo blog này (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) bộ lọc mờ đã bị bỏ sau khi IE9:

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

Họ đã đưa ra một giải pháp gọi là StackBlur (sử dụng JavaScript và bức tranh sơn dầu):

http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Đó là trong hình thức của một javascr ipt add-on có thể tải xuống từ trang đó.

Nguồn

2014-09-15 14:38:39

Ông có thể xin vui lòng giúp đỡ trong việc trau chuốt về cách sử dụng kịch bản này? Không có hướng dẫn tốt cho nó. – Oliver

Bạn đã thử mã nguồn mẫu mà họ cung cấp chưa? Chúng cũng hiển thị ba lệnh đơn giản trên trang - một lớp lót đơn giản. Cách sử dụng: stackBlurImage (sourceImageID, targetCanvasID, radius, blurAlphaChannel); hoặc: stackBlurCanvasRGBA (targetCanvasID, top_x, top_y, width, height, radius); hoặc: stackBlurCanvasRGB (targetCanvasID, top_x, top_y, width, height, radius); –

Đó là từ trang được cung cấp: http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html –

Dưới đây là một giải pháp mà làm việc trong IE10 + bằng cách sử dụng SVG: https://jsfiddle.net/joegeringer/g97e26pa/8/

<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>

Nguồn

2017-03-02 17:38:23 joegeringer

@JeffClayton Các tham chiếu đó chỉ đơn giản là để minh họa mã ở đây, LoremPixel.com trả lại các hình ảnh ngẫu nhiên về các kích thước được chỉ định. –

Điều này thật tuyệt vời! –

Lưu ý: bạn không thể sử dụng hình ảnh SVG này với hình ảnh được liên kết làm nền như 'body {background-image: url (blurred.svg); } 'ngay cả khi bạn nội tuyến nó thông qua' url ("dữ liệu: hình ảnh/svg + xml; base64, CODE") trick', ví dụ: [dịch vụ này] (https://websemantics.uk/tools/svg-to-background-image-conversion/) – izogfif

Làm mờ CSS trong IE 11

Trả lời

Các vấn đề liên quan