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

div

class

=

frosted-glass

/div

3< /p>

img

class

=

weather

src=

4

/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

4

background-image: url(background.png);

5

background-repeat : no-repeat;

6

background-attachment: fixed;

7

overflow: hidden;