发表新帖
发表新帖

Full Page Blur in CSS

前端 未结
关注
8 889
清酒与你
清酒与你 2020-12-08 09:59

How can I blur a whole page using CSS? Other elements such as images are allowed.

相关标签:
8条回答
  • 南笙
    2020-12-08 10:19

    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.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-08 10:24

    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>
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-08 10:34

    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/

    0 讨论(0)
  • 攒了一身酷
    2020-12-08 10:35

    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);
}
    0 讨论(0)
  • 离开以前
    2020-12-08 10:43

    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.

    0 讨论(0)
  • 别那么骄傲
    2020-12-08 10:44

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题