问题
How can I blur a whole page using CSS? Other elements such as images are allowed.
回答1:
This is working in Firefox and WebKit using the filter: blur(radius). See Can I Use: CSS filters for which browsers can support this.
.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);
}
The blur.svg for Firefox 34 or below looks like this:
<?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>
You can adjust the radius, but lower values mean better performance.
回答2:
You can use the filter property with blur, although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.
body {
filter: blur(2px);
}
回答3:
Real life demo here: http://premium.wpmudev.org/project/e-commerce/ (click on the video).
They add the class thickbox-open to the body, when thickbox is open, and from there target and style a whole-content (except overlay and popup) containing element like so:
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
Okay so no, still not fully usable (http://caniuse.com/css-filters), but we’re getting there.
Apply to a containing element as above rather than body since a blur filter cannot be negated by child elements.
回答4:
I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.
/* 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 */
}
Since your page height can vary, you'd probably want to use Javascript to set the height for this element.
回答5:
This is possible in Firefox only at this time. Here are the steps (see example here).
You need the XHTML doc type (since we're using XML SVG markup).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
Insert the SVG element where the blur should appear.
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
Include inline style (not from external css file).
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
This gives you a true blur (like zoom out effect), not the standard transparent glass look you find everywhere else.
回答6:
Here is a quick and dirty solution, take it and use if want, tested on Firefox & chrome, but should work across compliant browsers
<!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>
回答7:
Whatever you are trying to do, if it's not just for fun, don't do it :)
I think you'd have to loop all elements trough the blur filter which only works with IE and not with firefox.
Here's an ugly solution to achieve an IMO ugly blur in FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
回答8:
On the height 100% question, there is no CSS solution, even in CSS3, but there is a JQuery way of doing it. If the element is #modal, define all other properties in the CSS file and do not even mention the height property in the CSS. Then put the following JQuery code in your HTML as follows:
<script type="text/javascript">
$(function(){
$('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
$('.modal') .css({'height': (($(window).height()))});
});
</script>
This requires JQuery of course, and may cause issues if the content is taller than the viewport. As to the ability to blur the contents behind it dynamically, that's something I'd love to know.
来源：https://stackoverflow.com/questions/371209/full-page-blur-in-css