背景要素のCSSフィルタ

4576 ワード
テキストリンク
私は一度だけ練習をするときに、コードをチェックすることができます反応を使用して写真エディタアプリを作ることにしたhere , 研究の間、私はCSSフィルタについて発見しました.HTML要素にフィルタを適用する方法です.
このチュートリアルでは、背景要素にフィルターを作成する方法を示します.カバー画像のようなもの.
完全なデモをダウンロードすることができますcodepen
まずインデックスと呼ばれるHTMLファイルを作成します.基本的なスタイルを持つHTML.
<body>
    <div class="content">
        <h1>Backdrop test</h1>
        <p>Just a demo on the CSS backdrop-filter</p>
    </div>
<style>
body {
            margin: 0px;
            background-image: 
                url('https://source.unsplash.com/600x800');
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        .content {
            margin: auto;
            align-self: center;
            width: 50%;
            background-color: #fff;
            padding: 2rem;
        }
</style>
</body>
ここでのボディーは、バックグラウンドイメージがスタイルタグと他のスタイルの基本的なデザインの中でリンクされた背景要素です.
CSSについて既に知っているでしょうfilter しかし、我々がそれを使うならば、全身要素と内容域はフィルタも適用されます.
バックグラウンドでフィルタを適用するにはbackdrop-filter 通常の値filter タグ.それで、それをしましょう、体のスタイルの中でbackdrop-filter 下記のスタイル
body{
    backdrop-filter: blur(90px);/*added here after other styles*/
}

気をつけるべきもの
Opera miniのようなブラウザが見られるhere CSSフィルタをサポートしていない場合は、どのように解決するかを尋ねます.
このような驚きを避けるために、サポートする前に適用する前にチェックしてください.CSSを使うことができます@supports 後述.
background-color: #fff;
   @supports (backdrop-filter: blur()) {
    background-color: transparent; /*Has to be transparent*/
    backdrop-filter: blur(100px) contrast(90%);
  }
注意:背景画像を使用するので、背景色を追加する必要はありませんが、背景画像がない場合は、背景色を適用している場合は、背景の色を適用してください.
チェックMDN ドキュメントのために.
私はあなたがこの便利な、良い一日を見つける🙂
百俊1956運動
[白俊解答問題]#11657