Kannst du den Inhalt unter/hinter einem Div unscharf machen?

Question

Ich erstelle gerade ein neues Webdesign in Photoshop, aber ich würde gerne wissen, ob es möglich ist, den Inhalt unter einem Div zu verwischen?

Ich möchte eine halbtransparente nav Leiste auf meiner Seite erstellen, die oben auf dem Bildschirm festgelegt ist. Alles was unter/hinter fließt, möchte ich verschwommen haben. Für diejenigen von euch, die ein iOS-Gerät mit iOS 7 haben, schaut euch den Header von Safari an; wo die Seite unter der Kopfzeile unscharf ist. Das ist der Effekt, nach dem ich suche.

Ich hätte nichts dagegen, dass der Effekt nicht auf älteren Browsern (IE8 usw.) funktioniert, die in diesem Fall einen Hintergrund mit 0,5 Deckkraft als Fallback haben.

Wenn das möglich ist, bin ich wirklich auf der Suche nach dem notwendigen Code!

Answer 1

Möglicherweise ein Duplikat this question, wobei in diesem Fall: Sie können dies mit Leinwand abziehen und die StackBlurforCanvas Bibliothek. Siehe this

UPDATE: Es sieht so aus, als ob diese Funktion landed in the Webkit nightly build, hat, so dass Sie eventuell nur mit CSS arbeiten können.

Answer 2

Ich habe dieses jQuery-Plugin in der Vergangenheit verwendet und es hat ganz gut funktioniert: http://blurjs.com/ Es klingt wie es genau das ist, was Sie suchen.

Answer 3

Sie dies mit css3 tun können, verwischt diese das gesamte Element

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

Fiddle: http://jsfiddle.net/H4DU4/

Answer 4

Wenn Sie unblur aktivieren möchten, können Sie nicht einfach die Unschärfe CSS zum Körper hinzufügen, Sie müssen jedes sichtbare Kind eine Ebene direkt unter dem Körper verwischen und dann das CSS entfernen, um zu blenden. Der Grund ist wegen der "Cascade" in CSS, Sie können die Kaskadierung des CSS-Unschärfe-Effekts für ein Kind des Körpers nicht rückgängig machen. , Auch den Körper des Hintergrundbild verwischen müssen Sie das Pseudoelement verwenden: vor

//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'); 
    } 
} 

Full Working Example Link