Do a login page, full-screen background image of the frosted glass effect, the implementation method is as follows:
Html:
<body> <p class= "Login-wrap" > <p class= "login-mask" ></p> <p class= "Login-box" ></p& Gt </p> <script> var w = window.innerwidth | | Document.documentElement.clientWidth | | Document.body.clientWidth; var h = window.innerheight | | Document.documentElement.clientHeight | | Document.body.clientHeight; $ ('. Login-mask '). CSS ("height", h); $ ('. Login-mask '). CSS ("width", w); </script></body>Css:
. login-wrap {Overflow:hidden;}. Login-mask {/* IE6~IE9 */Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=100, Makeshadow=false); -webkit-filter:blur (100px); -moz-filter:blur (100px); -ms-filter:blur (100px); Filter:blur (100px); Background-image:url (.. /.. /.. /img/background/home-bg-3.jpg); Background-repeat:no-repeat; Background-size:cover; background-attachment:fixed; Background-position:center; Position:absolute; Z-index:1;}. Login-box {width:300px; height:400px; Background-color:rgba (255, 255, 255, 0.5); Display:block; BORDER:1PX Solid Rgba (183, 183, 183, 0.47); border-radius:6px; Position:absolute; left:50%; Margin-right:auto; Margin-left: -150px; margin-top:10%; Z-index:2;}The effect is as follows:
It can be found that there are white edges on the edge, which is a very large case of a blur value. At this point the solution is to direct the background-size:cover; change to background-size:150% 150%; it's all right. As follows:
Look carefully to find that the white side is not so obvious.
The other is that the value of the blur is smaller than the case, such as the above-mentioned blur value is changed to 20, the effect is as follows:
You can see the white edge is obvious, this time if the body to add the same background map, the white edge will disappear:
Body{Background-image:url (.. /.. /.. /img/background/home-bg-3.jpg); Background-repeat:no-repeat; Background-size:cover; background-attachment:fixed; Background-position:center;}As follows:
You can see the difference between the edges is obvious. But the contrast is a bit obvious, the effect is not good, the value of blur is changed to a smaller point, changed to 5, as follows:
The edges of the white edges were removed and looked less vainly disobey.
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
How to deal with the disappearance of CSS boundary lines
Enabling multi-background simulation of dynamic borders
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
