Comment le flou de fond et non pas sur le contenu Ionique/CSS

Je suis en train d'avoir un arrière-plan flou pour le contenu de mon.

Jusqu'à présent j'ai essayé ceci:

.background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

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

et puis

<ion-view class="background-image">
   //header, content, footer etc
<ion-view>

Mais puis-je obtenir le problème que la totalité de l'écran est floue et pas seulement l'arrière-plan comme suit:

Comment le flou de fond et non pas sur le contenu Ionique/CSS

Le flou seulement l'image de fond, votre code devrait ressembler à ceci: <ion-view class="background-image"></ion-view> <div>header, content, footer</div>
Vous devez mettre .background-image dans le contenu, absolue positionné avec une baisse de z-index. stackoverflow.com/questions/20039765/...

OriginalL'auteur JohnAndrews | 2015-06-25

  1. 6

    mis de côté les troubles de la div.

    .background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

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

<div class="background-image"></div>

<div>Content</div>
    Qui ont travaillé. Merci
    Aucune idée de comment faire pour supprimer le flou blanc dans les coins (ce qui devrait être une autre question, je sais), mais vous savez peut-être rapidement.
    essayez dis css .background-image { background: no-repeat center fixed; background-size: cover; display: block; left: -5px; top:-5px; bottom:-5px; position: fixed; à droite: -5px; z-index: 1; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; margin:-5px; }

    OriginalL'auteur Karan Bhutwala

  2. 3

    il y a un autre moyen d'en venir à ma tête, ce qui est d'ajouter une deuxième background-image,
    qui en css3, vous pouvez avoir plusieurs background pour un élément, et le second peut être un effet de flou de l'image, même en cas de faible qualité , comme ce

    dans sass

    #element
 background:
  image: url(/*first url*/), url(/*second url*/)
  size: auto auto /*first one*/, 100% 100% /* second one*/

    je suppose que deuxième de couverture de la première ou de revers , vous pouvez l'essayer

    Semble intéressant, merci

    OriginalL'auteur Taurus

  3. 2

    Mettre l'image en dehors de l'autre div... Comme ceci:

    <div class="background-image"></div>

<div class="content">
<p>Here goes your content</p>
</div>

    OriginalL'auteur Matthijs Otterloo