Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery

iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。

確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4

均一の余白で配置するバージョン

paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。
html&cssは下記のようにします。

html

<div class="panel">
    <div class="panel-in">
        <div class="panel-main">
            内容文が入ります。
        </div>
    </div>
</div>
    

css

*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-in::before,
.panel {
    background: url("bg.jpg") no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}
.panel {
    position: relative;
}
.panel-in::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
.panel-in {
    padding: 30px;
    position: relative;
}
.panel-main {
    padding: 30px;
    z-index: 30;
    position: relative;
    margin-bottom: 0;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}
    

基本的にCSSに下の要素をぼかす機能はないので、通常の画像とぼかし画像を配置する要素を作成することになります。
ここでは要素（before）にぼかし画像を配置しています。
ぼかしは「filter: blur(5px)」でできます。
で、２つの要素を重ねた状態でpaddingとかで配置疑似しようとすると当然画像がずれてしまいまね。
「background-clip: content-box」というのがあって、これを指定してpaddingするとコンテンツの部分のみ背景画像を適用してくれます。

パネルサイズを固定して中央配置

ぼかしパネルの横幅（width）固定して中央は位置してみます。
基本的にはpaddingで配置しないといけないので、その辺りはjQueryを使用しています。

html

<div class="panel">
    <div class="panel-in">
        <div class="panel-bg"></div>
        <div class="panel-main">
            内容文が入ります。
        </div>
    </div>
</div>
    

css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-bg,
.panel {
    background: url("bg.jpg") no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}
.panel {
    color: #000;
    position: relative;
}

.panel-bg {
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
}
.panel-in {
    padding: 30px;
    position: relative;
}
.panel-main {
    width: 800px;
    margin: 0 auto;
    padding: 30px;
    z-index: 30;
    position: relative;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}
@media (max-width: 800px) {
    .panel-main {
        width: 100%;
    }
}
    

javascript

(function($) {
    $(function() {
        var $bg = $('.panel-bg');
        setSize();
        $(window).resize(function() {
            setSize();
        });
        function setSize() {
            var pd = ($(window).width()-$('.panel-main').innerWidth())/2;
            $bg.css({
                'padding-left': pd,
                'padding-right': pd
            });
        }
    });
})(jQuery);
    

html&cssはほとんどかわらないですが、疑似要素はjQueryで操作できないので、divで普通に配置しています。
jQueryでは「panel-main」のウィンドウ幅をそのまま「panel-bg」に適用しているだけですね。