CSS: Contournement pour backdrop-filter?

Question

backdrop-filter est une nouvelle fonctionnalité css, qui n'est pas encore disponible dans les navigateurs modernes (au moins à compter du 1er juillet 2016).

• Chrome 51 soutient backdrop-filter via le Web Expérimentale Plate-forme de drapeau.
• Safari 9.1 permet il avec --webkit- préfixe
• Firefox 47 en l'absence de soutien

Être dans un tel état inutilisable, je voudrais savoir s'il existe une autre façon d'apporter le même résultat.

JS solutions de contournement pour le flou, niveaux de gris, ... sont également les bienvenus

Le développement de l' backdrop-filter peuvent être suivis à travers https://bugs.chromium.org/p/chromium/issues/detail?id=497522

Answer 1

Je l'utilise pour obtenir le populaire verre dépoli effet. Jusqu'à ce que quelqu'un avec succès invente un bon polyfill pour backdrop-filter je suis légèrement à l'aide d'un arrière-plan transparent comme une solution de secours:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Le filtre vous permettra de travailler dans de actuellement pris en charge les navigateurs. (Safari et Chrome Web expérimentale fonctionnalités de la Plateforme activé), Le code doit également travailler à l'avenir les navigateurs qui prennent en charge unprefixed backdrop-filter si la spec ne change pas d'avant.

Exemples avec et sans fond-support de filtre:

Answer 2

Je ne sais pas si vous êtes toujours en lice pour cette question, mais pour d'autres utilisateurs à l'avenir:

Cet effet peut être réalisé comme suit avec les CSS Pseudo-Classes, pas de JavaScript est nécessaire! indiqué ci-dessous:

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

Live exemple peut être vu sur Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Note Rapide:

En fonction de votre déjà la structure du site web, votre Z-Index peut être différent de celui décrit dans l'exemple.

Answer 3

Vous pourriez essayer d'ajouter différents filtres pour les images d'arrière-plan:

https://css-tricks.com/almanac/properties/f/filter/

La chute, c'est qu'il ne fonctionne que sur des images.

Fondamentalement, il y a 10 filtres intégrés pour le CSS filter de la propriété:

• flou(px)
• luminosité(%)
• contraste(%)
• ombre portée(h-shadow v-flou de la propagation de la couleur)
• niveaux de gris(%)
• la teinte de rotation(deg)
• invert(%)
• opacité(%)
• saturation(%)
• sépia(%)

Et en outre, vous pouvez fournir une url qui contient un fichier XML avec le appropariate filtre.