Flou d'arrière-plan avec les CSS

OCT. 2016 mise à JOUR

Depuis le -moz-element() propriété ne semble pas être largement pris en charge par d'autres navigateurs, sauf pour FF, il y a encore plus facile de la technique à appliquer le flou, sans affecter le contenu du conteneur. L'utilisation de pseudoelements est idéal dans ce cas en combinaison avec svg filtre de flou.

De vérifier la démo à l'aide de pseudo-élément

(Démo a été testé dans FF v49, Chrome v53, l'Opéra de 40 IE ne semble pas à l'appui de flou, soit avec du css ou de filtre svg)

---

Le seul moyen (pour l'instant) d'avoir un effet de flou en arrière-plan sans js plugins, est l'utilisation de -moz-element() bien en combinaison avec le svg filtre de flou. Avec -moz-element() vous pouvez définir un élément comme une image d'arrière-plan d'un autre élément. Ensuite, vous appliquez la svg filtre de flou. FACULTATIF: Vous pouvez utiliser jQuery pour faire défiler si votre arrière-plan est en fixed position.

Voir mon démo ici

Je comprends, il est assez compliqué de solution et limitée à FF (element() ne s'applique qu'à Mozilla en ce moment avec -moz-element() de la propriété), mais au moins il n'y a été un peu d'effort dans le passé, à mettre en œuvre dans les navigateurs webkit et nous espérons qu'il sera mis en œuvre dans l'avenir.

Depuis Safari 9.0, vous pouvez utiliser la toile de fond-filtre de propriété.

HTML

<div>backdrop blur</div>

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

ou si vous avez besoin de couleur de fond différente pour les navigateurs sans soutien:

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

JSFiddle

Mozilla Developer: toile de fond-filtre

CanIUse

Utilisation d'un élément vide de taille pour le contenu que l'arrière-plan, et la position du contenu sur les troubles de l'élément.

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

L'élément d'arrière-plan peut être à l'intérieur de l'élément de contenu, mais pas l'inverse.

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

Ce n'est pas facile si le contenu n'est pas toujours de taille constante, mais il fonctionne.

De quelle manière voulez-vous qu'il dynamique? Si vous souhaitez que le popup avec succès la carte à l'arrière-plan, vous devez créer deux milieux. Il exige à la fois l'utilisation de element() ou -moz-element() et un filtre (pour Firefox, utiliser un filtre SVG comme filter: url(#svgBlur) depuis Firefox ne prend pas en charge -moz-filter: blur() encore?). Il ne fonctionne que sous Firefox au moment de la rédaction.

Voir la démo ici.

J'ai encore besoin de créer une simple démonstration pour montrer comment il est fait. Vous êtes les bienvenus pour afficher la source.