Comment créer un verre dépoli effet à l'aide de CSS?

J'aimerais créer un div qui est fixé dans une position et de le rendre translucide prise le contenu derrière partiellement visible et plus floue. Le style que je suis à la recherche est similaire à la div de le "Voir Tous" les vignettes dans le Site web d'Apple.

La seule chose que je peux faire est d'ajuster opacity: 0.9 mais je ne peux pas brouiller les contenus en vertu de la div.

Remarque: Le div a une position fixe et l'arrière-plan défile. L'arrière-plan qui scolls est un mélange de texte et de photos.

css-plus.com/2012/03/gaussian-blur

OriginalL'auteur user2463516 | 2013-06-13

  1. 23

    CSS

    CSS 3 est un filtre de flou (seulement webkit pour le moment Nov 2014): 

    -webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

    IE 4-9 prend en charge un non-filtre standard

    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

    Voir quelques belles démo pour le flou et d'autres filtres ici.

    Comment créer un verre dépoli effet à l'aide de CSS?

    Pour référence future voici le tableau de compatibilité pour les CSS filtre. Firefox semble être la caractéristique dans v35+ alors même que, IE11 ne semble pas avoir de compatibilité.

    SVG

    Une alternative est l'utilisation du format svg (coffre-fort pour essentiellement IE9 et jusqu'):

    filter: url(blur.svg#blur);

    SVG:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

    jsFiddle Démo

    Javascript

    Vous permettra d'atteindre le plus élevé de compatibilité de votre navigateur avec javascript, mais généralement la plus lente de la performance et de complexité supplémentaire à votre js.

    Ce n'est pas vrai. blur est disponible par le biais de filter.
    ce repo n'est plus mise à jour, le propriétaire n'est pas conseillé pour une utilisation en production.
    ce repo? blur.js? Je ne le trouve pas sur leur site.
    Ceci ne répond pas à la question. Cela vous montre comment créer une image floue, pas comment créer un semi-translucide élément dont le fond est flou.
    blurjs.com est un lien mort maintenant

    OriginalL'auteur

  2. 8

    Vous pouvez utiliser les CSS filtre d'image.

    -webkit-filter: blur(2px);
filter        : blur(2px);

    Plus d'infos sur le CSS de filtres d'image:

    Démo: JSFIDDLE
    Comment créer un verre dépoli effet à l'aide de CSS?

    Mais en fait, ils sont à l'aide de pré traitées JPG, et l'utilisent comme une superposition dans la position correcte.

    #background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

    Démo: JSFIDDLE
    Comment créer un verre dépoli effet à l'aide de CSS?

    FF et IE ne prennent pas en charge le filtre atm, donc il n'y a pas de -moz-filter : blur(5px); et -ms-filter: blur(5px); developer.mozilla.org/en-US/docs/Web/CSS/filter
    Mon texte à l'intérieur de la div sera flou de trop, aucune idée pourquoi?

    OriginalL'auteur

  3. 2

    Vous m'a donné envie d'essayer, alors je l'ai fait, découvrez l'exemple ici:

    http://codepen.io/Edo_B/pen/cLbrt

    À l'aide de:

    1. HW Accéléré les filtres CSS
    2. JS pour la classe d'affectation et la touche flèche événements
    3. Images CSS Clip propriété

    .

    Je crois aussi que cela pourrait être fait de façon dynamique pour n'importe quel écran si vous utilisez de la toile pour copier les dom et le flou.

    OriginalL'auteur

  4. 1

    Il suffit de mettre la même image (ou des parties) avec une opacité .9 quelques pixels à gauche/droite/haut/bas - voilà

    OriginalL'auteur

  5. 1

    Cela devrait être à venir des navigateurs dans l'avenir comme un CSS filtre appelé backdrop-filter. Il n'y a pratiquement pas de soutien à tous actuellement. Pour la prise en charge du navigateur, voir: http://caniuse.com/#feat=css-backdrop-filter

    Cette CSS filtre vous permettra de faire les vitres sans un drôle d'affaires, ou des "hacks". Il vous suffit de le faire.

    Quelqu'un a enregistré une démo de sur la Vigne, et il a l'air vraiment bon. Ils ont été à l'aide de Safari de nuit pour obtenir l'accès à la CSS de filtre. https://vine.co/v/OxmjlxdxKxl

    OriginalL'auteur

  6. -2

    Première de toutes les OP membres que l'arrière-plan défile. Aucune des réponses vraiment permettre de défilement. Basé sur la façon dont le html est mis en place, c'est impossible. Mais avec l'utilisation de la célèbre/angulaire on peut avoir plusieurs moteurs de rendu pour atteindre cet effet. Je l'ai construit ici.

    L'idée derrière cela est de deux interprétations du site. L'un est l'en-tête de la version qui est floue. L'autre est le corps. J'ai utilisé de la Célèbre/Angulaire et l'utilisation de gabarits pour rendre le modèle dans la tête et le corps. L'en-tête d'un décalage de la hauteur de l'en-tête de manière à ce match. Je vais avoir des code posté bientôt ici et sur le site.

    OriginalL'auteur