☰

CSS は背景画像にはぼかしをかけるが、コンテンツにはぼかさない [重複] 質問する

tag-icon • tag-icon css background-image blur
CSS は背景画像にはぼかしをかけるが、コンテンツにはぼかさない [重複] 質問する

やったこの例。

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

コンテンツをぼかさずに背景をぼかすにはどうすればよいですか?

ベストアンサー1

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 を使用してクラスを追加および削除し、ぼかしとぼかし解除を行います。

おすすめ記事