帆布模糊div元素

是否可以使用画布创建模糊div？在互联网上我发现只有一个图像，但我正在寻找一个没有图像的代码。帆布模糊div元素

<div class="element_one" id="blur_this"></div>

来源

2015-12-29 Jop

您可以[获取所有div的HTML元素，并尝试画他们在画布上]（https://html2canvas.hertzen.com/），但这对于复杂的CSS会产生问题。你也可以查看[此CSS模糊教程]（http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/） [Stackoverflow问答]（http://stackoverflow.com/questions/8514954/blur-imgs-divs-in-html-using-css/8515089#8515089）。 – markE

的jsfiddle：https://jsfiddle.net/CanvasCode/zk7313dz/

CSS

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
    height= 400px; 
} 

.blur{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    width: 400px; 
    height= 400px; 
}

只需使用内置的blur是CSS已经:)

来源

2015-12-30 08:55:39 Canvas

IE＆Edge目前还不支持'filter'（并且Android最近才支持它），所以请确保在您提出的解决方案不是完全跨浏览器兼容时提醒观众。 ;-) – markE

我不知道@markE，但确实明白你觉得/认为你有一个更好的答案，而不是让这个用户徘徊在一个答案，请继续前进，并提供一个。我只是试图以良好的精神帮助别人 – Canvas

使用“过滤器”是一个很好的答案。 :-)但是请确保在提出使用新兴浏览器功能的解决方案时提供“正视” - 就这些了。 – markE

帆布模糊div元素

回答

相关问题