Wie kann ich eine ganze Seite mit CSS verwischen? Andere Elemente wie Bilder sind erlaubt.
Antworten
Zu viele Anzeigen?
coops
Punkte
89
Hier ist eine schnelle und schmutzige Lösung, nehmen Sie es und verwenden Sie, wenn Sie wollen, getestet auf Firefox & Chrome, aber sollte über kompatible Browser funktionieren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur</title>
<style type="text/css">
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%}
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15}
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2}
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;}
.fin{margin-right:auto;margin-left:auto}
body{display:none}
</style>
<script type="text/javascript">
var winX=window.innerWidth-20;
var winY=screen.availHeight-10;
var count=0;
var maxCount=50;
var goBlur=true;
function ele(id) {
return document.getElementById(id);
}
function runBlur() {
if(goBlur) {
for(var i=0; i<2; i++) {
var x = Math.random()<0.5?-1:1;
var y = Math.random()<0.5?1:-1;
if(ele("f"+i).offsetLeft >3)
x=-1;
else if(ele("f"+i).offsetLeft<-3)
x=1;
if(ele("f"+i).offsetLeft >3)
y=-1;
else if(ele("f"+i).offsetLeft<-3)
y=1;
ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px";
ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px";
}
}
count++
if(count>maxCount) {
count=0;
if(goBlur)
goBlur=false;
else
goBlur=true;
for(var i=0; i<3; i++) {
ele("f"+i).style.left = "0px";
ele("f"+i).style.top = "0px";
}
}
setTimeout("runBlur()",200);
}
function pageLoaded() {
var content = document.body.innerHTML;
var rewriteBody="";
for(var i=0; i<3; i++) {
rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>';
}
document.body.innerHTML=rewriteBody;
setTimeout("setUp()",200);
}
function setUp() {
for(var i=0; i<3; i++) {
ele("f"+i).style.width=winX+"px";
}
document.body.style.display="block";
runBlur();
}
</script>
</head>
<body onload="pageLoaded()">
<h1 style="color:#900">Page blur example</h1>
You can put any page content and html you want here.
</body>
</html>
markus
Punkte
39397
Was auch immer Sie vorhaben, wenn es nicht nur zum Spaß ist, lassen Sie es bleiben :)
Ich glaube, man müsste alle Elemente durch den Weichzeichnungsfilter schleifen, was nur mit IE und nicht mit Firefox funktioniert.
Hier ist eine hässliche Lösung, um eine IMO hässliche Unschärfe in FF zu erreichen: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
Mike Burroughs
Punkte
39
Auf die Höhe 100% Frage, gibt es keine CSS-Lösung, auch in CSS3, aber es gibt eine JQuery Weg, es zu tun. Wenn das Element #modal ist, definieren Sie alle anderen Eigenschaften in der CSS-Datei und erwähnen Sie die Eigenschaft height nicht einmal im CSS. Fügen Sie dann den folgenden JQuery-Code wie folgt in Ihr HTML ein:
<script type="text/javascript">
$(function(){
$('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
$('.modal') .css({'height': (($(window).height()))});
});
</script>Dazu ist natürlich JQuery erforderlich, und es kann zu Problemen kommen, wenn der Inhalt größer ist als der Viewport. Was die Fähigkeit, den Inhalt dahinter dynamisch zu verwischen, das ist etwas, das ich gerne wissen würde.
- See previous answers
- Weitere Antworten anzeigen
0 Stimmen
Ich bin mir nicht sicher, ob das bei allen Browsern der Fall ist (mit Text-Shadow wie tharkun schlägt vor ist eine mögliche Abhilfe). Aber Sie sind nicht der Einzige, der darum bittet, und Sie können Ihre Stimme zu diesem Thema hinzufügen Anfrage zum Hinzufügen eines Unschärfeeffekts zu CSS .