css – 模糊整个网页的效果

前端之家收集整理的这篇文章主要介绍了css – 模糊整个网页的效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望我网站上的未注册用户看到整个网站的页面具有模糊效果.

如何用css创建这种模糊效果

解决方法

这里有一些结果,如果模糊,你的意思是模糊:

这个人在组合中使用图像移位和不透明技术,我知道你的用户正在看一个模糊的网站,但如果没有简单的解决方案,那么可能拍摄你的rego页面的快照并覆盖图像然后它可能会:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

如果你想尝试复制你的rego页面,假设它可能是a)禁用和b)minimal,那么也许你甚至可以使用上面的图像技术并将其应用于节点集,用CSS定位来抵消副本和不透明度 – 如果缩放可能对你有帮助的idk.即使您的页面足够小,这显然也需要Javascript来复制节点,除非您的后端可以执行此节点复制.只是一个想法,真的.这是一个非常糟糕,非常快速的例子:

http://jsfiddle.net/9qnsz/2/

这篇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;
    }
原文链接:https://www.f2er.com/css/217620.html

猜你在找的CSS相关文章