5

いくつかのコンテンツを含むいくつかの子ノードを持つ要素にガウスぼかしを適用しようとしています。

Chromeの場合、適用されたスタイルで行いました：

    -webkit-filter: blur(2px);

Firefox はこれをサポートしていません。firefox がサポートしているのは、SVG を要素に適用することです。これを知って、SVG を使用して要素にガウスぼかしを適用する方法を説明する例を Google で検索しました。このデモでこの例を見つけました。

次のCSSを作成しました。

    #div-with-content{
        -webkit-filter: blur(2px);
        filter: url('#blur');
    }

そして、これを対応するHTMLファイルに入れます：

    <svg:svg>
        <svg:filter id="blur">
            <svg:feGaussianBlur stdDeviation="2"/>
        </svg:filter>
    </svg:svg>

しかし、ページをテストしたところ、それdiv-with-contentがもう存在しないことがわかりました。消えていました。ぼかしスタイルを削除するたびに、div-with-content再び表示されます。

誰かがこれについて私を助けてくれませんか、私は本当に私の知識の範囲内ですべてを試しました.

4

5 に答える 5

3

それがアポストロフィなのか svg なのかわかりませんが、このバージョンは Firefox で完全に動作します:

CSS:
#div-with-content{
        filter: url("#blur");
    }


HTML:
<svg>
   <filter id="blur">
       <feGaussianBlur stdDeviation="2"/>
   </filter>
</svg>

<div id="div-with-content"> WOohooo</div>
于 2013-02-20T23:23:16.530 に答える
2

ぼかしたいテキストしかない場合は、この小さなトリックがあります

p{
   color: transparent;
   text-shadow: 0 0 4px #222;
}

ここでそれがどのように機能するかを見ることができます

于 2013-02-20T16:29:19.383 に答える