Reines CSS, um den zugrunde liegenden Milchglaseffekt zu erzielen (Codebeispiel)-CSS-Tutorial-php.cn

Reines CSS, um den zugrunde liegenden Milchglaseffekt zu erzielen (Codebeispiel)

不言

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

nach vorne

3659 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Realisierung des zugrunde liegenden Milchglaseffekts (Codebeispiel) mit gewissem Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Milchglashintergrund ist ein sehr verbreiteter Webseitenstil. Nach einer Suche im Internet habe ich jedoch festgestellt, dass viele Implementierungsmethoden relativ unregelmäßig sind und das Problem erschweren als Positionierung verschiedener Z-Index-Attribute und Position)

Stellt jetzt eine Implementierungslösung mit sehr einfachem Code und guten Implementierungseffekten bereit, verbessert gegenüber W3Schools

HTML-Teil

<!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>

Nach dem Login kopieren

.mainHolder ist der Hauptrahmen
.textHolder ist der Milchglasbereich
.p ist der auf dem Milchglas schwebende Textinhalt

CSS-Teil

* {
  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;
}

Nach dem Login kopieren

Um das Kernproblem im Milchglaseffekt zu lösen: Der Unschärfeeffekt kann die Schriftart nicht beeinflussen, indem die Pseudoelemente ::after und ::before verwendet werden
Es ist erwähnenswert, dass das Positionsattribut im p-Tag verwendet wird. Wenn es auf „relativ“ gesetzt ist, wird p aus dem blockierten Zustand „aufgehoben“.
Außerdem unterscheidet sich die Art und Weise, wie Filter für verschiedene Browserkerne geschrieben werden, geringfügig.

Das obige ist der detaillierte Inhalt vonReines CSS, um den zugrunde liegenden Milchglaseffekt zu erzielen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!