Heim > Artikel > Web-Frontend > Reines CSS, um den zugrunde liegenden Milchglaseffekt zu erzielen (Codebeispiel)

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

不言nach vorne: 2018-11-27 16:27:023576Durchsuche

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>

.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;
}

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!

css Filter position 伪元素

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Verstehen Sie schnell die CSS4-Farbanpassungseigenschaft in 5 MinutenNächster Artikel：Verstehen Sie schnell die CSS4-Farbanpassungseigenschaft in 5 Minuten

In Verbindung stehende Artikel

Mehr sehen