ガウスぼかしフィルター効果分析_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ガウスぼかしフィルター効果分析_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:59:34

オリジナル

1647 人が閲覧しました

はじめに

私は怠け者なので、そのようなものがあることは知っていますが、テクノロジーがそれであることを嘆いています。日を追うごとに変化していきますが、今回は曇りガラスのハイエンドエフェクトが必要な音楽アプリを作成する必要があるという状況に遭遇しました。この効果は多くの音楽アプリで非常によく見られますが、Web ではおそらく互換性とパフォーマンスの問題が原因で発生することはありません。要求があるなら、それを実装する方法を見つけなければなりませんが、私はそれらのPMと協力するのが最も嫌いです、これが非常に面倒で実装が難しいと彼らに言うと、彼らは兄弟のように振る舞うでしょう。絶対にできるよ！淫乱な表情で私をさらってくれたねぇ、誰が私にプログラマーになれって言ったの？実は私、これを実現したいんです。私は黙って鶏の血を自分に与え、終わりのない検索と学習に専念しました。

css3-filter

検索した結果、この属性フィルターを見つけました:blur (5px)。急いでそれを実現してください。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title></title> 6 <style> 7 .d1{ 8     background-image:url('./lp.png'); 9     background-size:cover;10     -webkit-filter:blur(10px);11     filter:blur(10px);12     width:300px;13     height:300px;14 }15 </style>16 </head>17 <body>18     19     <div class="d1"></div>20 </body>21 </html>

ログイン後にコピー

へー、これは本当に写真が見つからない O(∩_∩)O はは~

ぼかしの効果。

数値が大きいほど、画像がよりぼやけます。

...

... .

....

ただし、フィルターアルゴリズムは画像のピクセルを処理するため、フィルター属性を設定した後に背景画像を設定する必要があります。上記の例で言えば、要素内にテキストがある場合、そのテキストは表示されなくなります。別のレイヤーを追加すると、実際には、Indeed (これはナンセンスではないでしょうか...) 見てみましょう

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title></title><style>.wrap{    position:relative;    width:300px;    height:300px;    line-height:300px;    text-align:center;}.d1{    background-image:url('./lp.png');    background-size:cover;    -webkit-filter:blur(10px);    filter:blur(10px);    position: absolute;    top:0;    left:0;    width:100%;    height:100%;    z-index:-1;}</style></head><body>        <div class="wrap">        <div class="d1"></div>        <div class="content">我爱你老婆</div>        </div></body></html>View Code

ログイン後にコピー

完璧です!

。 ...

.....

....

しかし、物事はそれほど単純ではありません!

歌詞はほとんど白文字です。フォントも曇りガラスも明るすぎて混乱しやすいです。実際は簡単です。背景の透明度を少し追加するだけです。

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title></title><style>.wrap{    position:relative;    width:300px;    height:300px;}.d1{    background-image:url('./lp.png');    background-size:cover;    -webkit-filter:blur(10px);    filter:blur(10px);    position: absolute;    top:0;    left:0;    width:100%;    height:100%;    z-index:-1;}.content{    width:100%;    height:100%;    line-height:300px;    color:#fff;    text-align:center;    background-color:rgba(0,0,0,0.3);}</style></head><body>        <div class="wrap">        <div class="d1"></div>        <div class="content">我爱你老婆</div>        </div></body></html>View Code

ログイン後にコピー

見た目はかなり良くなります。実際には、ぼかしフィルターを追加すると、曇りガラスが必要な場合でも要素が透明になります。下のレイヤーを覆うには、別のレイヤーを追加して背景色を追加する必要があります。

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title></title><style>.wrap{    position:relative;    width:300px;    height:300px;}.filter{    background-image:url('./lp.png');    background-size:cover;    -webkit-filter:blur(10px);    filter:blur(10px);    position: absolute;    top:0;    left:0;    width:100%;    height:100%;    z-index:-1;}.filter-bg{    position:absolute;    top:0;    left:0;    width:100%;    height:100%;    background-color:#333;    z-index:-2;}.content{    width:100%;    height:100%;    line-height:300px;    color:#fff;    text-align:center;    background-color:rgba(0,0,0,0.3);}</style></head><body>        <div class="wrap">        <div class="filter-bg"></div>        <div class="filter"></div>        <div class="content">我爱你老婆</div>        </div></body></html>View Code

ログイン後にコピー

この状況では、画像の周囲のぼかし効果があまり良くないことがわかります。ぼかしの値が大きいほど、ぼかした領域がより顕著になり、画像内の明らかな色の領域が互いに近い場合、エッジが透明になるか、ぼやけて見えるようにする傾向があります。

問題は解決したようです!!

本当に解決しましたか?!

本当に?

svg-< filter>

興奮して、この件は終わったと思っていたのですが、アニメーションを付けたときに、曇りガラスを動かすと、全身が崩れ落ちました。購入したばかりの 6s ローズゴールドでした。もちろん、音楽を再生しながらページをドラッグすることが前提条件であり、ページ要素の数は平均的ですが、音楽を再生することでページ全体のパフォーマンスが低下するわけではありません。ほら、このエフェクトを作りたいなら、ラグは一つずつカットしてください。

PMは私の怒りの表情を見て太極拳を始めました。まずは落ち着いてください。飲み物はいかがですか？

もちろん承ります。 PMと長い間話し合った後、この問題を解決する必要があると感じました。そうしないと、長い間無駄になるでしょう。プログラマーを使用しなかったということは、エンジニアの価値である創造性と問題解決能力に直面しなければなりません。まず、問題がフィルター属性であるかどうかを特定する必要があります。この属性のパフォーマンスは本当に心配なようですが、私は最終的に Google のラップを採用しました。 css3、svg、canvas でもフィルター効果を実現できます。私は svg を試してみましたが、その効果は非常にスムーズでした。

<svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">         <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs>    <image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/></svg>View Code

ログイン後にコピー

< ; filter> タグはフィルターを記述するために使用され、その id 属性は

タグ内に記述する必要があります。 🎜>最終的なエフェクトは実装の仕組みが違うのだと思いますが、svgにフィルターを追加した後、動的計算を繰り返すことなくcss3のフィルター属性を有効にする必要があります。、より複雑な効果を実行する場合、遅延は明らかです。

SVG フィルターを使用しても、透明にしたくない場合は、背景色のレイヤーを追加することを忘れないでください。 .

互換性の比較

もう一度互換性を比較してみましょう。svg の方がわずかに優れており、Android 4.4 でのみサポートされていることがわかります。

この 2 つの方法で他のフィルタ方法を使用したことはありません。詳細は説明しません。

概要