web-dev-qa-db-fra.com

Arrière-plan flou avec CSS

Je veux un effet Vista/7-aero-glass-style sur un popup sur mon site, et il doit être dynamique. Je suis d'accord avec le fait que cela ne soit pas un effet multi-navigateur tant que le site fonctionne toujours sur tous les navigateurs modernes.

Ma première tentative a été d'utiliser quelque chose comme

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

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

Cependant, comme j'aurais dû m'y attendre, le résultat du contenu de la boîte de dialogue est flo et l'arrière-plan reste clair. Existe-t-il un moyen d'utiliser CSS pour rendre flou l'arrière-plan d'un élément semi-transparent au lieu de son contenu?

csspopupaero-glass
45
Supuhstar

OCT. MISE À JOUR 2016

Étant donné que la propriété -moz-element() ne semble pas être largement prise en charge par les autres navigateurs, à l'exception de FF, il existe une technique encore plus simple permettant d'appliquer le flou sans affecter le contenu du conteneur. L'utilisation de pseudoéléments est idéale dans ce cas en combinaison avec le filtre svg blur.

Vérifiez la démonstration à l'aide du pseudo-élément

(La démo a été testée dans FF v49, Chrome v53, Opera 40 - IE ne semble pas pour supporter le flou avec filtre css ou svg)

Le seul moyen (jusqu'à présent) d'avoir un effet de flou en arrière-plan sans les plug-ins js est d'utiliser la propriété -moz-element() en combinaison avec le filtre svg. Avec -moz-element(), vous pouvez définir un élément en tant qu'image d'arrière-plan d'un autre élément. Ensuite, vous appliquez le filtre de flou svg. FACULTATIF: Vous pouvez utiliser un certain jQuery pour le défilement si votre arrière-plan est en position fixed.

Voir ma démo ici

Je comprends que c’est une solution assez compliquée et limitée à FF (element() ne s’applique qu’à Mozilla pour le moment avec la propriété -moz-element()) mais au moins il y a eu quelques efforts = dans le passé à implémenter dans les navigateurs webkit et si tout va bien, il sera implémenté à l'avenir .

34
otinanai

Vous pouvez utiliser un pseudo-élément pour positionner comme arrière-plan du contenu avec la même image que l'arrière-plan, mais floue avec le nouveau filtre CSS3.

Vous pouvez le voir en action ici: http://codepen.io/jiserra/pen/JzKpx

Je l'ai fait pour personnaliser une sélection, mais j'ai ajouté l'effet de flou d'arrière-plan.

17
Juan Ignacio Serra

Depuis Safari 9.0, vous pouvez utiliser la propriété backdrop-filter.

[~ # ~] html [~ # ~] 

<div>backdrop blur</div>

[~ # ~] css [~ # ~] 

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

ou si vous avez besoin d'une couleur de fond différente pour les navigateurs sans support:

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

Développeur Mozilla: backdrop-filter

CanIUse

17
hovado

Il existe une technique simple et très courante qui consiste à utiliser 2 images d’arrière-plan: une image nette et une image floue. Vous définissez l'image nette comme arrière-plan pour le corps et l'image floue comme image d'arrière-plan pour votre conteneur. L'image floue doit être réglée sur un positionnement fixe et l'alignement est parfait à 100%. Je l'ai utilisé avant et ça marche.

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

Vous pouvez voir un exemple de travail au violon suivant: http://jsfiddle.net/jTUjT/5/. Essayez de redimensionner le navigateur et vérifiez que l'alignement n'échoue jamais.

Si seul CSS element() était pris en charge par d'autres navigateurs que -moz-element() de Mozilla, vous pourriez créer d'excellents effets. Voir cette démo avec Mozilla .

8
otinanai

Utilisez un élément vide dimensionné pour le contenu en tant qu'arrière-plan et placez le contenu sur l'élément flou.

#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 uniforme, mais cela fonctionne.

1
Devon

Vous pouviez passer à travers les iframes ... J'ai créé quelque chose, mais mon seul problème pour l'instant est de synchroniser ces divs pour qu'ils défilent simultanément ... c'est terrible, parce que c'est comme si vous chargiez 2 sites Web, mais le seul moyen que j'ai trouvé ... vous pouvez aussi travailler avec des divs et des débordements, je suppose ...

1
Danton Heuer

De quelle manière voulez-vous que ce soit dynamique? Si vous souhaitez que la fenêtre contextuelle mappe correctement à l'arrière-plan, vous devez créer deux arrière-plans. Il nécessite à la fois l'utilisation de element() ou -moz-element() et d'un filtre (pour Firefox, utilisez un filtre SVG comme filter: url(#svgBlur) car Firefox ne prend pas encore en charge -moz-filter: blur().) ?) Cela ne fonctionne que dans Firefox au moment de la rédaction.

Voir la démo ici.

J'ai encore besoin de créer une simple démo pour montrer comment faire. Vous êtes invités à voir la source.

1
Alan Gresley