Wie kann ich eine ganze Seite mit CSS verwischen? Andere Elemente wie Bilder sind erlaubt.
Antworten
Zu viele Anzeigen?
tobspr
Punkte
7832
Dies funktioniert in Firefox und WebKit unter Verwendung der filter: blur(radius) . Siehe Kann ich verwenden: CSS-Filter für welche Browser dies unterstützt werden kann.
.blurredElement {
/* Any browser which supports CSS3 */
filter: blur(1px);
/* Firefox version 34 and earlier */
filter: url("blur.svg#gaussian_blur");
/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
-webkit-filter: blur(1px);
}Die blur.svg für Firefox 34 oder niedriger sieht wie folgt aus:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="gaussian_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>Sie können den Radius anpassen, aber niedrigere Werte bedeuten eine bessere Leistung.
pimvdb
Punkte
146174
Sie können die filter Eigenschaft mit blur obwohl es nicht allgemein unterstützt wird: http://jsfiddle.net/GkXdM/1/ . Es wird von Chrome unterstützt, ist aber mit einem großen Leistungsverlust verbunden, wenn es auf der gesamten Seite verwendet wird.
body {
filter: blur(2px);
}
Aron Rotteveel
Punkte
77486
Ich bin nicht sicher, ob es das ist, was Sie meinen, aber ein oft gesehener Unschärfe-Effekt wird durch die Erstellung eines DIV-Elements in voller Höhe und Breite mit einer Hintergrundfarbe und Deckkraft-Eigenschaft erstellt.
/* DIV-element with black background and 50% opacity set */
div.overlay {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}Da die Höhe Ihrer Seite variieren kann, sollten Sie wahrscheinlich Javascript verwenden, um die Höhe für dieses Element festzulegen.
Jason Hibbs
Punkte
157
Hier ein Beispiel aus dem wirklichen Leben: http://premium.wpmudev.org/project/e-commerce/ (klicken Sie auf das Video).
Sie fügen die Klasse thickbox-open in den Body einfügen, wenn die Thickbox geöffnet ist, und von dort aus ein Element, das den gesamten Inhalt (außer Overlay und Popup) enthält, wie folgt anvisieren und gestalten:
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}Okay, also nein, immer noch nicht vollständig nutzbar ( http://caniuse.com/css-filters ), aber wir sind auf dem besten Weg dahin.
Auf ein enthaltendes Element anwenden wie oben, anstatt body da ein Weichzeichnungsfilter nicht durch untergeordnete Elemente negiert werden kann.
Joseph Lust
Punkte
18000
Dies ist zur Zeit nur in Firefox möglich. Hier sind die Schritte (siehe Beispiel ici ).
Sie benötigen den XHTML-Dokumenttyp (da wir XML-SVG-Auszeichnungen verwenden).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">Fügen Sie das SVG-Element ein, in dem der Weichzeichner erscheinen soll.
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>Inline-Style einbinden (nicht aus externer css-Datei).
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>Dadurch entsteht ein echter Unschärfeeffekt (wie beim Herauszoomen) und nicht der übliche transparente Glas-Look, den man überall sonst findet.
- 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 .