BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。

2022-01-11 06:43:21

始めずに、本題に入りましょう。
通常の背景ぼかし効果は以下の通りです。

属性を使用します。 

filter:(2px)

通常の背景ぼかし

背景の前のテキストは美観上ぼかすことができず、filterプロパティによってdivの子孫全体がぼかされ、さらに白いボーダーがつくことになります。つまり、この効果を得ることは不可能なのです。どうすればいいのでしょうか？擬似要素を使えばいいのです。これも白い縁取りの問題を解決してくれます。

実装のアイデア
親コンテナに背景を設定し、相対的な位置関係を用いて擬似要素の重なりを容易にする。:afterでは、背景を継承し、ぼかしを設定し、親要素を絶対位置決めで上書きするだけです。こうすることで、親コンテナ内の子要素はぼかしの影響を受けなくなります。擬似要素のぼかしは、親の子要素には継承できないからです。
そんなこんなで、気分を一新するためにコードを紹介します。

簡単なhtmlのレイアウトです。 

<div class="bg">
   <div class="drag">like window</div>
</div>

cssを使用します。 

/* background blur*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url(". /image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(2px);
    z-index: 2;
}
.drag{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height:200px;
    text-align: center;

    z-index:11;
}

もちろん、上記のコードを見て、親コンテナ以下の子要素も絶対位置決めを使用することがわかりますが、これはバックのレイアウトには影響しませんので、（問題があるブロガーのトラブルを見つけることができます〜）を使用して自由に感じることができます。注意する場所は、階層的な関係を決定するためにz -インデックスを使用することです、あなたは子要素（つまり、ここでドラッグ）最上位層にあることを確認する必要があります。そうでないと、子要素のテキストが表示されません。

注意深い学生は気づいたと思いますが、上記のコードには、divを確実に中央に配置する方法もあります! これは、フレックスレイアウトを使わずに、比較的簡単にdivを中央寄せにする方法です。

では、このようにコードを書くと、どのような効果があるのでしょうか。

背景の部分ぼかし

前の効果に比べ、背景の部分的なぼかしはよりシンプルになりました。この場合、親要素は擬似要素にぼかしを設定する必要は全くありません。これは、子要素をぼかすための上記のコードと直接的に類似していますが、子の子孫はぼかせないかもしれません（解決策は、前の効果で説明したとおりであることに注意してください）。
というように、HTMLのレイアウトが若干変更されています。 

<div class="bg">
   <div class="drag">
        <div>like window</div>
   </div>
</div>

cssのコードは以下の通りです。(比較に注意) 

/* background partial blur*/
.bg{
    width:100%;
    height:100%;
    background: url(". /image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.drag{
    margin:100px auto;
    width:200px;
    height:200px;

    background: inherit;

    position: relative;
}
.drag >div{
    width:100%;
    height: 100%;
    text-align: center;
    line-height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index: 11;
}
.drag:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*Turn up the blur to make it more visible*/
    z-index: 2;
}

その効果は次の通りです。

背景の部分的な透明度

背景の部分的な明瞭化の効果は、簡単とは言えませんが、難しいことではありません。ポイントは、background:inheritプロパティを適用することです。ここでは、transformを使って縦中央にすることができないので、やはりフレックスレイアウトを選択しています。ここでまたtransformプロパティを使用すると、背景もオフセットされた状態になります。これでは局所的なわかりやすさの効果がありません。
htmlのレイアウトは変わりません。
cssの変更にご注意ください。 

/* background partial clarity*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url(". /image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}
.drag{
    position: absolute;
    left:40%;
    top:30%;
    /*transform: translate(-50%,-50%);*/
    width:200px;
    height:200px;
    text-align: center;

    background: inherit;
    z-index:11;

    box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
}

エフェクトのショーケースです。

例の3つの効果のぼやけた背景を達成するためにCSS3のこの記事は、これに導入され、より関連するCSS3は、以前の記事のスクリプトのホームを検索してくださいまたは次の関連記事を閲覧し続け、私はあなたが将来的には、スクリプトのホームをサポートして願っていますぼやけた背景コンテンツ

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します