3 ms·
You could do it like this with CSS, data URI and SVG: .blur { background-image: url('data:image/xml+svg;utf8, <svg xmlns="http://www.w3.org/2
by pygy_ 15y ago
You could do it like this with CSS, data URI and SVG:
.blur {
background-image: url('data:image/xml+svg;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="f1">
<feComponentTransfer>
<feFuncR type="table" tableValues="0.5 1"/>
<feFuncG type="table" tableValues="0.5 1"/>
<feFuncB type="table" tableValues="0.5 1"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<image x="0" y="0" width="300" height="80"
xlink:href="http://background.png"
filter="url(#f1)" />
</svg>
');
}
(expanded for clarty, and I didn't test it so it may be buggy/not syntactically correct).
You can off course generate all that in JS and parametrize it.
It should work in Chrome, but won't in IE9. No idea for other browsers.
see http://jsfiddle.net/estelle/SJjJb/ http://jsfiddle.net/estelle/SJjJb/