解决方法
这里有一些结果,如果模糊,你的意思是模糊:
这个人在组合中使用图像移位和不透明技术,我知道你的用户正在看一个模糊的网站,但如果没有简单的解决方案,那么可能拍摄你的rego页面的快照并覆盖图像然后它可能会:
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
如果你想尝试复制你的rego页面,假设它可能是a)禁用和b)minimal,那么也许你甚至可以使用上面的图像技术并将其应用于节点集,用CSS定位来抵消副本和不透明度 – 如果缩放可能对你有帮助的idk.即使您的页面足够小,这显然也需要Javascript来复制节点,除非您的后端可以执行此节点复制.只是一个想法,真的.这是一个非常糟糕,非常快速的例子:
这篇SO帖子概述了未完成图像时高斯模糊的一些限制和困难,并且有一些有趣的链接:
Gaussian Blur onHover Using jQuery
编辑:根据要求,jsfiddle的内容:
<div class="container"> <div class="overlay"> <p>Please register etc etc...</p> </div> <form action="javascript:;" class="form0"> <input type="text" value="Username" /> <input type="text" value="Password" /> <button>Submit</button> </form> <form action="javascript:;" class="form1"> <input type="text" value="Username" /> <input type="text" value="Password" /> <button>Submit</button> </form> <form action="javascript:;" class="form2"> <input type="text" value="Username" /> <input type="text" value="Password" /> <button>Submit</button> </form> <form action="javascript:;" class="form3"> <input type="text" value="Username" /> <input type="text" value="Password" /> <button>Submit</button> </form> <form action="javascript:;" class="form4"> <input type="text" value="Username" /> <input type="text" value="Password" /> <button>Submit</button> </form> </div> .container { width:500px; height:500px; position:relative; border:1px solid #CCC; } form { position:absolute; left:10px; top:10px; } form.form0 { left:11px; top:11px; opacity:0.1; } form.form1 { left:8px; top:8px; opacity:0.1; zoom:1.02; } form.form2 { left:11px; top:11px; opacity:0.1; zoom:1.01; } form.form3 { left:9px; top:9px; opacity:0.2; } form.form4 { left:11px; top:11px; opacity:0.1; } .overlay { width:250px; height:250px; margin-top:50px; margin-left:auto; margin-right:auto; border:1px solid #666; }