Do a login page, full screen background image of the effect of glass, the implementation of the following methods:
<div class= "Login-wrap" >
<div class= "Login-mask" ></div>
<div class= "Login-box" ></div>
</div>
<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>
. 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 is a white edge on the edge, which is a blur of the value of a large case. At this point the solution is to direct the background-size:cover, to background-size:150% 150%, on the line. The effect chart is as follows:
A closer look reveals that the white side is less obvious.
The other is when the value of the blur is relatively small, such as the above blur value to 20, the effect is as follows:
It can be seen that the white edge is obvious, this time if the body to add the same background image, 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;
}
The effect chart is as follows:
You can see the difference between the edges is obvious. But the contrast is a little obvious, the effect is not good, the value of the blur will be changed to a smaller, 5, the effect of the chart is as follows:
The edges of the white edges were removed and looked less Shong.
If you think the background of the first method is too bright, you can use a filter to darken it:
Background-color:rgba (141, 141, 141, 0.35);
Background-blend-mode:darken;
The effect is as follows:
Add: CSS3 Hair glass effect (blur) has white edge
Complete CSS Code
. blur {
Filter:url (Blur.svg#blur); * FireFox, Chrome, Opera * *
-webkit-filter:blur (10px); * * Chrome, Opera * *
-moz-filter:blur (10px);
-ms-filter:blur (10px);
Filter:blur (10px);
Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=10, Makeshadow=false); * IE6~IE9 * *
}
2. Solve the white-side way
The relevant HTML code is as follows:
The principle is very simple is to blur the picture below in positioning a picture of the same, when to blur the picture shrink, it will show the lower picture ... The white side is gone, hahaha ... Do you have any idea?
CSS styles compatible with various browsers for the solution of the effect of hair glass
-webkit is for, WebKit Core Browser, the typical Chrome,safari
-moz is the Mozilla core, typical, Firefox
-O-,-xv-, typical opera
-ms, a look will know is Microsoft, generally omitted
You add other vendors ' headers, and some of them don't support this property,
How to use CSS to add white edge to the font
Use Text-shadow this property to design the projection effect of the font, but IE does not support, but CSS3.0 can support, later can be displayed. Text-shadow: The setting is this: text-shadow:1px 1PX 1PX #FFFFFF. The first value is the x-axis direction, the second value is the y-axis direction, and the third value is the larger the blur after the projection, and the fourth is the color value after the projection.
