How to create frosted glass effect with CSS

Frosted glass is actually frosted glass, which can vaguely see the scenery behind it, making people feel hazy and beautiful, and making the interface look layered.

For example:

On the tall side, the next step is definitely the process of itching.

Of course, it is undoubtedly the most convenient to create a panoramic ground glass background with ps, and there is nothing to do next.

Of course, no, no.

Ground glass is undoubtedly a blur, and filter blur is essential.

End result (chrome): Weather forecast

Yeah, that's fine.

1

discrepancy

classes

=

container

2

discrepancy

classes

=

frosted glass

/div

three

img

classes

=

weather

src=

four

/div

First, make a div as a container layer to place the landscape background map.

Put a div inside as the main body of ground glass.

Put another img icon to show the weather.

Container layer:

The size is the size of the picture, and the landscape map is displayed as the background, which is not repeated. A trick is used here. Set the background-attachment to fixed and do not scroll with the element. After the sub-element inherits the background of this layer, the sub-element becomes a viewport, and wherever it moves, it will see the background. . . Um ... . This sentence is a bit difficult to understand, and the lack of language expression ability of code farmers is also a great distress.

1

. Container {

2

Width: 287px

three

Height: 285px

four

Background-picture: URL (background.png);

five

Background-Repeat: No repeat;

six

Background-attachment: fixed;

seven

Overflow: hide;

eight