Flou de fond avec CSS

je veux Vista/7-aero-verre-effet de style sur un popup sur mon site, et il doit être dynamique. Je suis d'accord avec ce n'est pas un effet de cross-browser tant que le site encore 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, que j'aurai prévu, ce qui a abouti à la contenu de la boîte de dialogue flou et le contexte reste clair. y a-t-il un moyen d'utiliser CSS pour brouiller le fond d'un élément semitransparent au lieu de son contenu?

44
demandé sur Damjan Pavlica 2013-01-28 19:37:52

7 réponses

OCT. Mise à jour 2016

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

Vérifier la démo à l'aide de pseudo-element

(Demo a été testé en FF v49, Chrome V53, Opera 40-IE ne semble pas supporter blur avec CSS ou svg filter)

la seule façon (jusqu'à présent) d'avoir un effet flou à l'arrière-plan sans les plugins js, est l'utilisation de -moz-element() propriété en combinaison avec l' svg filtre de flou. -moz-element() vous pouvez définir un élément comme une image d'arrière-plan d'un autre élément. Puis vous appliquez le svg filtre de flou. Optionnel: vous pouvez utiliser certains jQuery pour défiler si votre arrière-plan est en fixed position.

voir ma démo ici

je comprends que c'est assez compliqué solution et limitée à FF (element() s'applique uniquement à Mozilla en ce moment avec -moz-element() propriété), mais au moins il y a eu effort dans le passé à mettre en œuvre dans les navigateurs webkit et espérons qu'il sera mis en œuvre dans le futur.

34
répondu otinanai 2016-10-20 12:48:10

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

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

Je l'ai fait pour personnaliser un select, mais j'ai ajouté l'effet de fond flou.

17
répondu Juan Ignacio Serra 2013-09-02 18:36:42

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 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: background-filter

CanIUse

14
répondu hovado 2018-03-11 20:43:12

il y a une technique simple et très courante en utilisant 2 images de fond: une nette et une floue. Vous réglez la netteté d'image comme arrière-plan pour le corps et l'floue comme une image de fond de votre récipient. L'image floue doit être positionnée de façon fixe et l'alignement est parfait à 100%. Je l'ai utilisé avant, et cela fonctionne.

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 de voir que l'alignement n'échoue jamais.

si seulement CSS element() a été pris en charge par d'autres navigateurs que -moz-element() vous pourriez créer de grands effets. Voir cette démo avec Mozilla.

8
répondu otinanai 2014-01-24 16:39:54

utilisez un élément vide dont la taille est adaptée au contenu comme 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 constante, mais il fonctionne.

1
répondu Devon 2013-04-28 15:06:17

vous pourriez passer par iframes... J'ai fait quelque chose, mais mon seul problème pour l'instant est de synchroniser ces divs pour faire défiler simultanément... sa manière terrible, parce que c'est comme vous chargez 2 sites Web, mais le seul moyen que j'ai trouvé... vous pourriez aussi travailler avec les divs et overflow je suppose...

1
répondu Danton Heuer 2013-07-24 01:37:55

dans quel sens voulez-vous qu'il soit dynamique? Si vous voulez que le popup s'adapte avec succès à l'arrière-plan, vous devez créer deux arrière-plans. Il exige à la fois l'utilisation de element() ou -moz-element() et un filtre (pour Firefox, utilisez un filtre SVG comme filter: url(#svgBlur) puisque Firefox ne supporte pas -moz-filter: blur() encore?). Il ne fonctionne dans Firefox qu'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 bienvenue pour voir la source.

1
répondu Alan Gresley 2013-12-15 03:24:30