1

CSS3 では、これで何でも簡単にぼかすことができます。

-webkit-filter: blur(5px);
-moz-filter: ...

現在、テキストの上にドラッグ可能な円を作成して、その円の領域内にあるものをぼかすようにしています:

position:absolute;
-webkit-filter: blur(3px);
background: rgba(255, 255, 255, .3);

これは技術的には機能するはずですが、代わりに次のように表示されます。

　　　　ここに画像の説明を入力

見た目がバグっていますが、最も重要な部分は、半透明の円内のテキストがぼやけていないことです。CSSまたはJavaScriptで修正する方法はありますか?

例: http://jsfiddle.net/hSpHd/

4

2 に答える 2

1

問題は、フィルタのマスキングがサポートされていないことです。つまり、フィルタはすべての要素に適用されます。この制限の 1 つの回避策は、2 つの要素を持ち、フィルターを 1 つに適用し、それを透明にマスクすることです。次に、フィルター処理されていない 2 番目の (同一の) 要素が表示されます。

CSS は次のようになります。

#one, #two {
    position: absolute;
    width: 200px;
    height: 400px;
    font-size: 18px;
}

#one {
    top: 20px;
    left: 20px;
    background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px); 
    background-position: -20px -20px;
}

#two {
    top: 0px;
    left: 0px;
    -webkit-filter: blur(2px);      
    -webkit-mask-position: -20px -20px;
    -webkit-mask-size: 200px 400px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px); 
    background-color: white;
}

HTMLはアブドです

<div id="one">Lorem ipsum ...
<div id="two">Lorem ipsum ....
</div>
</div>

つまり、ネストされた 2 つの div で、同じ内容です。

フィドル

私がそれについて好きではないこと：

同じコンテンツの 2 つの div が必要です。

マスクの位置 (div 2) を背景の位置 (div1) と同期させる必要があります。div 2 に円を設定して、すべてを同時に移動することもできますが、円がぼやけてしまいます。

しかし、それは始まりです:-)

ところで、私はどこでもグラデーションの最新の構文を使用しました。最初から互換性に制限があるので、気にしなくてもいいと思います。

于 2013-06-02T10:14:52.750 に答える