Blur hintergrund eines div
Möchte ich den hintergrund unscharf einer div. Ich kann nur Lösungen finden, die für Bilder als hintergrund, nicht die HTML-Elemente. Es ist für den mobilen Einsatz so CSS3 ist kein problem. Ich habe eine JSfiddle zusammen zeigen, mein dilema.
Meinem gewünschten Ergebnis:, Wenn die dropdown angezeigt wird, es verwischt die Inhalte der alle Elemente, die direkt hinter ihm, nicht die gesamte Seite.
Hier ist die HTML zum Beispiel Zwecke von der JSFiddle:
HTML
<a href="#" id="link">open/close</a>
<div id="slide">
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
</div>BEARBEITET:13:00 18/06/2013
Habe ich versucht, die "akzeptierte Antwort" zu arbeiten, aber aus irgendeinem Grund funktioniert es nicht, wenn extrahiert aus der JSfiddle
Hier ist mein code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$( document ).ready(function() {
$('#link').click(function() {
$('#slide').slideToggle('slow', function() {
});
});
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
});
</script>
<style>
#link {
z-index: 1000;
position: absolute;
top:0;
left:0;
}
#partial-overlay {
padding-top: 20px;
display:none;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index:99;
}
canvas{
height: 100px;
position: fixed;
top: 0;
left: 0;
-webkit-filter:blur(2px);
}
#cover{
display:none;
height:99px;
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
}
#main-view {
width:300px;
}
</style>
</head>
<body>
<div id="main-view">
<a href="#" id="link">open/clode</a>
Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content,
</div>
<div id="cover"></div>
<div id="partial-overlay">
<p>Some content here</p>
<p>Some content here</p>
</div>
</body>
</html>Ich habe versucht, mit und ohne DOM-ready-wrapper
- versuchen Sie das jq-plugin blurjs.com, iam nicht sicher, ob u können, schafft blur-Effekt mit css
- css-plus.com/2012/03/gaussian-blur Überprüfen Sie in diesem Artikel
- Dies ist nicht das verwischen der hintergrund div, sieht aber ähnlich: jsfiddle.net/GhrUD/1
- Viele point-hungrig Kopierer unten :p
- Ich habe versucht, blur.js dies funktioniert aber nur für Bilder. Ist bedeutet, es funktioniert für html-Elemente, aber dies ist nicht der Fall, strickly nur Bilder. Das ist, warum Es nicht meine Bedürfnisse anzupassen.
- Aravind30790 zeigt, wie Unschärfe ein element unter, aber das ist nur, wie unscharf eine tatsächliche element - nicht die Dinge dahinter. Das ist nicht möglich, mit html & css. Deckkraft und einem weißen hintergrund ist die beste, die Sie erhalten.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, das ist das, was Sie suchen. Ich nutze das canvas-element. Ich vermute, dies wird sehr populär geworden mit den neuen anstehenden release von iOS7, der macht sich diesen Effekt zu nutze.
fiddle http://jsfiddle.net/kevinPHPkevin/TfWs3/49/
Obwohl es nicht wirklich eine Unschärfe, aber das hinzufügen einen weißen hintergrund mit einem alpha-Wert wird den trick tun (
background: rgba(255, 255, 255, 0.8)). Experiment mit dem alpha-Wert für die besten Ergebnisse.Sehen hier und hier (die zweite hat einen grauen hintergrund auf den Inhalt, so dass Sie sehen können, was passiert).
Erstellen Sie ein overlay für die Bild. unter css-code für Verweis