Maison > Article > interface Web > CSS pur pour obtenir l'effet de verre dépoli sous-jacent (exemple de code)

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

不言avant: 2018-11-27 16:27:023621parcourir

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>

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

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!

css Filter position 伪元素

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comprenez rapidement la propriété CSS4 color-adjust en 5 minutesArticle suivant：Comprenez rapidement la propriété CSS4 color-adjust en 5 minutes

Articles Liés

Voir plus