4-3 視覚効果 すりガラス効果_html/css_WEB-ITnose

Knowledge Reserve

1.filter:blur() CSS3 ぼかしフィルター

---

この効果は非常に興味深いです。まずレンダリングを見てみましょう

すりガラス効果

効果の実装

まず HTML 構造を見てみましょう。この本の著者は、特に馴染みがないため、blockquote 構造を使用して表示しています。

サンプルコード: html

<div class="mytest">     <p>"The only way to get rid of a temptation is yield to it.Resist it,and your soul grows sick with longing for the things it has forbidden to itself."             <br/>Oscar Wilde,The Picture of Dorian Gray      </p></div>

css 背景画像なのでコンテナサイズを設定する必要があります

.test{     position: relative;    width: 400px;    height: 250px;   margin: 0 auto;  background: url("锥头螳螂.jpg") center;  background-size: cover;}

テキスト p コンテナを設定します (ここではガラスと呼びます) 垂直/水平中央揃え

.test p{    width: 330px;    padding: 15px;   //设置文字左右/垂直居中  position: absolute;  left: 50%;    top: 50%;   transform: translate(-50%,-50%);   margin: 0;   //取消p标签的margin  background: hsla(0,100%,50%,.6);  //设置其背景色  color: white;   border-radius: 3px;   overflow: hidden;  //下面具体分析其作用}

曇りガラスの効果をシミュレートする疑似要素を設定します

.test p::before{     position: absolute;    left: 0;  top: 0;  bottom: 0;  right: 0;      content: '';    background: url("锥头螳螂.jpg");   background-size: cover;     margin: -20px;   //！！这个后面会说明   z-index: -1; //！！这个后面会重点说明   -webkit-filter: blur(20px);   filter: blur(20px);}

ということで、大量のコードを読むのはまだ不快です。アイデアを整理しましょう

1. 画像を表示するための親コンテナを設定します

2. p タグを設定し、ガラスさん (p タグ) を水平/垂直中央に配置し、ガラスさんの背景を半透明にしましたカラー効果:

半透明の背景

3. 上記の半透明の色はテキストを読む能力に影響を与えるため、 毛深い 効果を作成しましょう。まずはフィルタを追加しましょう そして div コンテナと同じ背景画像を設定します

background: url("锥头螳螂.jpg") no-repeat center;-webkit-filter: blur(5px);filter: blur(5px);

次に、テキストが隠れないように z-index=-1 を設定します

ただし、まだ少し欠陥があります -- -ぼかしの度合いはエッジに達するほど明白ではなくなります

観察によると、エッジに達するにつれてぼかしが目立たなくなることがわかります

そこで、作者は

margin: -20px;

を非常に巧みに使用して、ぼかしの半径を拡大し、 と同時に背景画像と一致するようにしてください これは非常に重要なので、注意してください。 ！ ！ ！

最初にぼかし半径について説明しましょう

拡張されたぼかし半径 (親コンテナを超えて)

そこで、Mr. Glass (p タグ) のスタイルで

overflow:hidden

を設定します

効果を見てみましょう

理想的なぼかし効果

次に、2 番目の点について話しましょう。これには少し計算が必要ですが、これはこの効果の制約の 1 つでもあります フィルターを削除して、疑似要素の背景画像と背景を確認してみましょう。 div コンテナの画像 互いに一致しています

明らかに重なっていない背景

ぼかした後は検出するのは簡単ではありませんが、弱いぼかしフィルターが必要な場合は簡単に検出できる場合があります。理由！よくよく考えてみると、疑似要素とdiv背景のサイズが合っていなくて、背景画像の拡大縮小が異なっていてズレてしまっていました。理由を理解したら、次のようにまとめます。

1. div コンテナと疑似要素の幅を同じにする必要があります。 2. div コンテナによって画像が水平方向に拡大縮小されることは望ましくありません。高さ

計算: 擬似要素の幅は 330px+2x 擬似要素の内側の距離は 15px + 2x、擬似要素の外側の距離は 20px = 400px で、これは div コンテナの幅と正確に一致します、そして私たちのズレは消えました。 (ここではマージンが調整効果を発揮します)

4. フィルターを追加し、その効果は既に非常にリアルでしたが、曇りガラスと背景色が混ざり合っているように見えたので、ミスター グラスで追加しました。 (p タグ) 背景色 (ここでの色を明確にするためには、背景色と大きな色差がある必要があります)

background: hsla(274, 100%, 90%, 0.2);

そして、前のセクションで学習したフィルターを疑似要素に追加します

mix-blend-mode: luminosity;

これで、効果

OK さまざまなフィルター効果を試してください