CSS pur pour obtenir l'effet de verre dépoli sous-jacent (exemple de code)-tutoriel CSS-php.cn

CSS pur pour obtenir l'effet de verre dépoli sous-jacent (exemple de code)

不言

Libérer： 2018-11-27 16:27:02

avant

3639 Les gens l'ont consulté

Le contenu de cet article concerne la réalisation de l'effet de verre dépoli sous-jacent (exemple de code) avec du CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le fond en verre dépoli est un style de page Web très courant. Il n'est pas difficile à mettre en œuvre. Cependant, après une recherche sur Internet, j'ai constaté qu'un grand nombre de méthodes de mise en œuvre sont relativement irrégulières et compliquent le problème (comme). comme positionnement de divers attributs et positions de l'index z)

Fournit désormais une solution d'implémentation avec un code très simple et de bons effets d'implémentation, amélioré par W3Schools

Partie HTML

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

Copier après la connexion

.mainHolder est le cadre principal
.textHolder est la zone de verre dépoli
.p est le contenu du texte flottant sur le verre dépoli

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

Copier après la connexion

Résoudre le problème principal de l'effet verre dépoli : l'effet de flou ne peut pas affecter la police et le pseudo-élément ::after est utilisé ::before
Cela vaut la peine de le noter celui de l'attribut de position de la balise p. Lorsqu'il est défini sur relatif, p sera "levé" de l'état bloqué.
De plus, pour différents cœurs de navigateur, la manière d'écrire le filtre sera légèrement différente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!