Pure CSS to achieve the underlying frosted glass effect (code example)-CSS Tutorial-php.cn

Pure CSS to achieve the underlying frosted glass effect (code example)

不言

Release： 2018-11-27 16:27:02

forward

3638 people have browsed it

The content of this article is about realizing the underlying frosted glass effect (code example) with pure CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Frosted glass background is a very common web page style. It is not difficult to implement. However, after searching on the Internet, I found that a large number of implementation methods are relatively irregular and complicate the problem (such as Positioning of various z-index attributes and position)

Now provides an implementation solution with very straightforward code and good implementation effects, improved from the W3Schools

HTML part

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>FrostedGlass</title>
    <link rel="stylesheet" href="frostedGlass.css">
  </head>
  <body>
    <div>
      <div>
        <p>this is FrostedGlass</p>
      </div>
    </div>
  </body>
</html>

Copy after login

.mainHolder is the main frame
.textHolder is the frosted glass area
.p is the text content floating on the 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(0, 0, 0, 0.25);
}
p {
  z-index: 1;
  color: white;
  position: relative;
  margin: 0;
}

Copy after login

To solve the core problem in the frosted glass effect: the blur effect cannot affect the font, and the pseudo element ::after is used::before
It is worth noting that the position attribute in the p tag is used. When set to relative, p will be "lifted" from the blocked state.
In addition, for different browser kernels, the way to write filter will be slightly different.

The above is the detailed content of Pure CSS to achieve the underlying frosted glass effect (code example). For more information, please follow other related articles on the PHP Chinese website!