版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ming_221/article/details/82805510
利用屏幕快照做毛玻璃效果。flter: blur(5px)只有作用在根节点或图片上才有毛玻璃的效果,但是作用在根节点body上的时候所有元素无法跳出文档流跳出毛玻璃,这才想到生成一张屏幕快照,模糊之后放在底下。
不可以把dom转成canvas,但是可以把dom转成svg,然后再把svg画到canvas里面去。为什么要先把dom转成svg呢?这可能是因为svg使用xml表示、结构和dom一致吧。
屏幕快照
图片必须要同源,否则生成的快照没有图片
html2canvas
http://html2canvas.hertzen.com/documentation
rasterizeHTML.js 知乎-右下角问题反馈快照
// 未解决
rasterizeHTML.allinone.js:11 Blocked script execution in 'http://localhost:5000/Report' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
可以利用before、after伪类做毛玻璃效果。前提是毛玻璃和弹窗必须是两个并列的节点
------------ 2018.6.6