Shulou(Shulou.com)06/02 Report--

This article "how to use pure CSS to achieve the bottom ground glass effect" article, the article sample code is introduced in great detail, has a certain reference value, interested friends must refer to, for "how to use pure CSS to achieve the bottom ground glass effect", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

Ground glass background is a very common web page style, which is not difficult to implement, but after my search on the Internet, I found that a large number of implementation methods are not standardized and complicate the problem (such as various z-index attributes and position positioning)

An implementation scheme with straightforward code and good implementation effect is provided, which is improved from W3Schools

HTML part

FrostedGlass

ThisisFrostedGlass

.mainHolder is the main frame.

.textHolder is a frosted glass area

.p is text floating on frosted glass.

CSS part

* {

Box-sizing:border-box

}

.mainHolder {

Width:600px

Height:600px

Background-image:url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);

Background-attachment:fixed

Background-position:center

Background-size:cover

Position:relative

}

.textHolder {

Width:100%

Height:200px

Position:absolute

Right:0

Bottom:0

Background:inherit

Overflow:hidden

}

.textHolder:: before {

Content:''

Position:absolute

Top:0

Right:0

Bottom:0

Left:0

Background:inherit

Background-attachment:fixed

Filter:blur (4px)

}

.textHolder:: after {

Content: ""

Position:absolute

Top:0

Right:0

Bottom:0

Left:0

Background:rgba (0pd0re0j0pl 0.25g)

}

P {

Z-index:1

Color:white

Position:relative

Margin:0

}

To solve the core problem in the ground glass effect: the blur effect can not affect the font, using the pseudo element:: after in:: before

It is worth noting that the position attribute in the p tag. When set to relative, p is "lifted" from the occluded state.

In addition, filter will be written slightly differently for different browser kernels.

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. The above is all the content of this article "how to use pure CSS to achieve ground glass effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.