web-dev-qa-db-ja.com

コンテンツではなく背景画像のCSSぼかし

この例 を実行しました。

背景画像をぼかしようとしていますが、メインコンテンツもぼかしています（<span>）

コンテンツをぼかすことなく背景をぼかすにはどうすればよいですか？

csscss3background-imageblur
29
itsme

ぼかした要素の上に1つの要素をオーバーレイできます

[〜＃〜] demo [〜＃〜]

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}
16
Kevin Lynch

jsfiddle

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

ボディの：before擬似クラスを使用して画像を継承し、それをぼかして、ボディの背景画像をぼかします。それをすべてクラスにラップし、javascriptを使用してクラスを追加および削除し、ぼかしたりぼかしたりします。

21
Mike Lee

メインのdivに別のimgまたはdivを追加し、代わりにぼかします。 jsfiddle

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}
9
TreeTree

jsfiddle 。

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

これはどうですか？ divには絶対位置がありませんが、代わりにimgとspanにあります。

2
JMercer

backdrop-filter

残念ながら、Mozillaは実際にボールを落とし、この機能を使って時間をかけました。私は個人的に、次のFirefox ESRに移行することを望んでいます。これは、Waterfoxの次のメジャーバージョンで使用されるものです。

MDN（Mozilla Developer Network）の記事： https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Mozillaの実装： https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

MDNドキュメントページから：

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
0
John