web-dev-qa-db-ja.com

CSSでのページ全体のぼかし

CSSを使用してページ全体をぼかすにはどうすればよいですか？画像などの他の要素は許可されます。

cssblur
26
Steve

これは、filter: blur(radius)を使用してFirefoxおよびWebKitで動作しています。 使用できます：CSSフィルター を参照してください。どのブラウザーがこれをサポートできますか。

.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);
}

Firefox 34以下のblur.svgは次のようになります。

<?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>

半径は調整できますが、値を小さくするとパフォーマンスが向上します。

28
tobspr

filterプロパティはblurで使用できますが、広くサポートされていません： http://jsfiddle.net/GkXdM/1/ 。 Chromeでサポートされていますが、ページ全体で使用するとパフォーマンスが大幅に低下します。

body {
    filter: blur(2px);
}
9
pimvdb

ここでの実際のデモ： http://premium.wpmudev.org/project/e-commerce/ （ビデオをクリック）。

Thickboxが開いているときにクラスにthickbox-openを追加し、そこから次のような要素を含むコンテンツ全体（オーバーレイとポップアップを除く）をターゲットおよびスタイル設定します。

.thickbox-open #main-container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
}

わかりましたので、まだ完全には使用できません（ http://caniuse.com/css-filters ）、しかし、我々はそこに着いています。

子要素はぼかしフィルターを無効にできないため、bodyではなく上記のように含む要素に適用します。

8
Jason Hibbs

これがあなたの言っていることかどうかはわかりませんが、背景色と不透明度のプロパティを設定して、全高、全幅のDIV要素を作成すると、よく見られるぼかしのような効果が作成されます。

/* 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 */
}

ページの高さはさまざまなので、JavaScriptを使用してこの要素の高さを設定することをお勧めします。

7
Aron Rotteveel

これは、現時点ではFirefoxでのみ可能です。手順は次のとおりです（例を参照してください here ）。

XHTML docタイプが必要です（XML SVGマークアップを使用しているため）。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

ぼかしを表示する場所にSVG要素を挿入します。

<div class="blurDiv"></div>
<svg:svg>
    <!-- Filter -->
    <svg:filter id="blurLayer">
         <!-- Blur and attributes -->
         <svg:feGaussianBlur stdDeviation="0.9"/>
    </svg:filter>
</svg:svg>

（外部CSSファイルからではなく）インラインスタイルを含めます。

<style type="text/css">
    div.blurDiv { filter:url(#blurLayer); }
</style>

これにより、他の場所にある標準の透明なガラスの外観ではなく、真のぼかし（ズームアウト効果など）が得られます。

4
Joseph Lust

Firefoxとchromeでテストしましたが、準拠しているブラウザーで動作するはずです。

<!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>
4
coops

あなたが何をしようとしても、それが楽しみのためだけではないなら、それをしないでください:)

IEで動作し、firefoxでは動作しないぼかしフィルターですべての要素をループする必要があると思います。

FFでIMOのいぼかしを実現するいソリューションを次に示します。 http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

0
markus