Pouvez-vous flouter le contenu sous/derrière un div? [dupliquer]

Question

Pouvez-vous flouter le contenu sous/derrière un div? [dupliquer]

cette question a déjà une réponse ici:

utiliser un div pour brouiller une image derrière lui? [duplicate] 2 réponses

je crée un nouveau design web dans Photoshop en ce moment, mais j'aimerais savoir s'il est possible de flouter le contenu sous un div?

J'aimerais créer une barre nav à moitié transparente sur ma page qui est fixée en haut de votre écran. Tout ce qui coule en dessous/derrière, je veux avoir flou. Pour ceux d'entre vous qui ont un iDevice avec iOS 7, consultez L'en-tête de Safari; où la page sous l'en-tête est floue. C'est l'effet que je recherche.

cela ne me dérangerait pas que l'effet ne fonctionne pas sur les navigateurs plus anciens (IE8 etc.), qui dans ce cas aura un fond blanc opacité 0,5 comme repli.

si c'est possible, je cherche vraiment le code nécessaire!

43

blur css

demandé sur royhowie 2014-03-13 23:21:58

4 réponses

score 20 · Answer 1

peut-être une copie de cette question , dans quel cas: vous pouvez tirer cela avec la toile et la bibliothèque StackBlurforCanvas. Voir ce

mise à jour: il semble que cette fonctionnalité a atterri dans le WebKit construction nocturne, donc éventuellement, vous pouvez être en mesure de le faire avec CSS seulement.

score 4 · Answer 2

si vous voulez activer unblur, vous ne pouvez pas simplement ajouter le CSS flou au corps, vous devez flouter chaque enfant visible un niveau directement sous le corps et ensuite enlever le CSS pour unblur. La raison est en raison de la "Cascade" dans CSS, vous ne pouvez pas défaire la cascade de l'effet flou CSS pour un enfant du corps. Aussi, pour brouiller l'image de fond du corps, vous devez utiliser l'élément pseudo: avant

//HTML

<div id="fullscreen-popup" style="position:absolute;top:50%;left:50%;">
    <div class="morph-button morph-button-overlay morph-button-fixed">
        <button id="user-interface" type="button">MORE INFO</button>
        <!--a id="user-interface" href="javascript:void(0)">popup</a-->
        <div class="morph-content">
            <div>
                <div class="content-style-overlay">
                    <span class="icon icon-close">Close the overlay</span>
                    <h2>About Parsley</h2>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                </div>
            </div>
        </div>
    </div>
</div>

//CSS

/* Blur - doesn't work on IE */

.blur-on, .blur-element {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);

    -webkit-transition: all 5s linear;
    transition        : all 5s linear;
    -moz-transition   : all 5s linear;
    -webkit-transition: all 5s linear;
    -o-transition     : all 5s linear;
}
.blur-off {
    -webkit-filter: blur(0px) !important;
    -moz-filter   : blur(0px) !important;
    -o-filter     : blur(0px) !important;
    -ms-filter    : blur(0px) !important;
    filter        : blur(0px) !important;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    height: 20%; width: 20%;
    background-size: cover;
    background: inherit;
    z-index: -1;

    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);       
    -moz-transform: scale(5);
    -moz-transform-origin: top left;
    -moz-filter: blur(2px);       
    -webkit-transform: scale(5);
    -webkit-transform-origin: top left;
    -webkit-filter: blur(2px);
    -o-transform: scale(5);
    -o-transform-origin: top left;
    -o-filter: blur(2px);       

    transition        : all 5s linear;
    -moz-transition   : all 5s linear;
    -webkit-transition: all 5s linear;
    -o-transition     : all 5s linear;
}


//Javascript

function blurBehindPopup() {
    if(blurredElements.length == 0) {
        for(var i=0; i < document.body.children.length; i++) {
            var element = document.body.children[i];
            if(element.id && element.id != 'fullscreen-popup' && element.isVisible == true) {
                classie.addClass( element, 'blur-element' );
                blurredElements.push(element);
            }
        }
    } else {
        for(var i=0; i < blurredElements.length; i++) {
            classie.addClass( blurredElements[i], 'blur-element' );
        }
    }
}
function unblurBehindPopup() {
    for(var i=0; i < blurredElements.length; i++) {
        classie.removeClass( blurredElements[i], 'blur-element' );
    }
}

Plein De Travail Exemple De Lien

score 0 · Answer 3

j'ai utilisé ce plugin jQuery dans le passé et cela a plutôt bien fonctionné: http://blurjs.com/ On dirait que c'est exactement ce que vous cherchez.

score -5 · Answer 4

vous pouvez le faire avec css3, cela brouille tout l'élément

div (or whatever element) {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

violon: http://jsfiddle.net/H4DU4 /

Las etiquetas más populares

Pouvez-vous flouter le contenu sous/derrière un div? [dupliquer]

4 réponses