0

So, I'm developing a website based on CSS3. Here is a part of code which trying to make the background blur.

.blur {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
            filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
        }

I know that IE is not supported for blur filter. I search for article they said I have to use SVG to solve this problem. But somehow my website is using in a scenario that there is no internet which mean that I cant access any url when browsing it. Is there anyway to solve this problem without using SVG?

Pwan
  • 153
  • 13
  • Possible duplicate of [Blur filter for IE 10+](http://stackoverflow.com/questions/19969853/blur-filter-for-ie-10) – Alexander O'Mara Aug 31 '16 at 02:27
  • Also, http://stackoverflow.com/questions/18424647/css-blur-filter-not-working-in-firefox-and-ie-10-any-alternatives, http://stackoverflow.com/questions/15803122/filter-blur1px-doesnt-work-in-firefox-ie-and-opera, http://stackoverflow.com/questions/25850100/css-blur-in-ie-11 – Alexander O'Mara Aug 31 '16 at 02:27
  • yeah man. But in my scenario there is not suitable to using svg to solve my problem – Pwan Aug 31 '16 at 02:30
  • I don't think SVG can do this in IE anyway. Basically, it's been asked before, and those are the best options that people have come up with, none of which are very good. – Alexander O'Mara Aug 31 '16 at 02:32
  • thats true. but problem is that in my scenario there is no internet. – Pwan Aug 31 '16 at 02:33
  • Its a cable connect point to point between pc and mcu web server. – Pwan Aug 31 '16 at 02:33
  • 1
    I'm afraid there is no magic blur property that has somehow gone unnoticed all this time. Unless there is some significant constraint you can add (perhaps to only blur images?) you don't have any other options available. – Alexander O'Mara Aug 31 '16 at 02:36

1 Answers1

0

One way that I can think of is basically just duplicating the background container and changing the opacity and moving the image slightly to give yourself a blur. Another option you have would be to just create another image to put on your server, and just use photoshop to blur it and then switch the picture

img:first-child {
  opacity: 1;
}
img {
  opacity: 0.2;
  position: absolute;
  top: 0;
}
img:nth-child(2) {
  left: 1px;
}
img:nth-child(3) {
  left: 2px;
}
img:nth-child(4) {
  left: 3px;
}
img:nth-child(5) {
  left: 4px;
}
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
Adjit
  • 10,134
  • 12
  • 53
  • 98