How to use CSS to create a frosted glass effect
Frozen glass is actually frosted glass, which can blurryly see the scenery behind it, giving people a hazy beauty and making the interface look somewhat layered.
For example:
You are so tall, the next step will definitely be an eye-watering process.
Of course, it is undoubtedly the easiest to use PS to create a panoramic frosted glass background, and then there will be nothing to do next.
Of course no no no.
Frost glass is undoubtedly a kind of blur, and filter blur is indispensable.
Final effect (chrome): weather forecast
Well, it can be regarded as make do.
1
div
class
=
container
2 p>
div
class
=
frosted-glass
/div
3< /p>
img
class
=
weather
src=
4 p>
/div
First create a div as a container layer to place the landscape background image.
Place a div inside as the main body of the frosted glass.
Put another img to display the weather icon.
Container layer:
The size is the size of the picture, and the landscape is displayed as the background, no-repeat. A little trick is used here. Set the background-attachment to fixed so that it does not scroll with the element. After the child element inherits the background of this layer, the child element becomes a viewport. You can see the background wherever you move it. . . Forehead. . . This sentence is a bit difficult to understand, and the lack of language expression is also a big worry for programmers.
1
.container{
2
width: 287px;
3
< p>height: 285px;4
background-image: url(background.png);
5
background-repeat : no-repeat;
6
background-attachment: fixed;
7
overflow: hidden;
< p>8