Is it possible to apply the blur effect or similar effect to IE10 and 11? If possible, I don't want to use png images. If you know how to implement it with css filter, svg, javascript, etc. Please let me know.
internet-explorer svg
IE10 and 11 are the targets, so we used SVG filters to create samples that blur background images.
.bg{
width —200px;
height —200px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3E%2Fdefs%3E%3Cimage%20xlink%3D%22http%3A%2F%2Fdummyimage.com%2F200x200%2F000%2Ffff%22%20 width%2D%22200%20height%3D%22200%22%22%22%22%22%22%20FurD%22%22%22%22%22%22%22%22%22%22%22%22%22%22%
}<div class="bg"></div>I I only checked IE10, IE11.
First, prepare an image with SVG filters.
In the SVG, http://dummyimage.com/200x200/000/fff is specified.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
<defs>
<filter id="blur"><feGaussianBlurstdDeviation="5"/></filter>
</defs>
<image xlink:href="http://dummyimage.com/200x200/000/fff" width="200" height="200" filter="url(#blur)"/>
</svg>
Next, put it in one line.
<?xml version="1.0" encoding="UTF-8"?>svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">defs><filter id="blur">feGaussianBlurstdDeviation="5"/>/lt;filter><lt;lt;lt;lt;lt;lt;lt;lt;filter>lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;lt;<<
I'll encode it.(for example, encodeURIC component)
%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3A%22%Fxlink%22http%22%F%22%F%F%22F%22F%F%F%F%F%F%22F%22F%F%F%22F%F%F%F%F%F%F%F3C%2Ffilter%3E%2Fdefs%3E%3Cimage%20xlink%3Ahref%3D%22http%3A%2F%2Fdummyimage.com%2F200x200%2F000%2Ffff%22%20width%3D%22200%22%20height%2D%22200%20filter%22url(%23blur)%22%22%Fv%2F%2F%F%Fvs3%F%2F%F%2F%F%2f%F%F%F%F%F%F%F%F
Then, specify the blurred image as the value of the background-image property of the element you want to specify in dataURI format.
.bg{
width —200px;
height —200px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3E%2Fdefs%3E%3Cimage%20xlink%3D%22http%3A%2F%2Fdummyimage.com%2F200x200%2F000%2Ffff%22%20 width%2D%22200%20height%3D%22200%22%22%22%22%22%22%20FurD%22%22%22%22%22%22%22%22%22%22%22%22%22%22%
}
There is also a jQuery plug-in, such as http://www.blurjs.com/.
Quoted from http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/.
I wrote in September 2011 that CSS and SVG filter will have a glassy effect, but this was only for Firefox. So this time, I will try to make as many browsers as possible.
I think this area will be helpful.IE10,11 are not compatible with CSS filter, but there seems to be a way to use SVG filter
How about using a library that allows Canvas to have a Filter effect, such as EasyJS (http://www.createjs.com/#!/EaselJS)?
http://www.createjs.com/Demos/EaselJS/Filters_input.html
I think you can set up each vendor prefix.
.background.dialog{
- webkit-filter: blur(10px); // for Google Chrome and Safari
-moz-filter:blur(10px); // for Firefox
-o-filter:blur(10px); // for Oper
-ms-filter:blur(10px); // for Internet Explorer
}
© 2024 OneMinuteCode. All rights reserved.