それはHTML + CSSでマックOSXのFinder検索ハイライトをエミュレートすることは可能ですか？

Question

マックOSXのFinderが一致した部分以外のすべてを暗くし、検索機能を備えています。

の
<サブ>（ソース： justaddwater.dk の）

CSSを経由して、それをエミュレートする方法はありますか？私は半透明の黒色の不透明度50とのdivしかし、どのように、私はそれに穴をカットしないを追加することを考えていました？そしておそらくエッジがあいまいにする？

任意の提案ですか？

Answer 1

<のhref =」からのjQueryプラグインを公開http://flowplayer.org/tools/demos/index.html」のrel = "nofollowをnoreferrer"> のコレクションのjQuery TOOLS。私はそれはあなたが探している正確に何を達成すると思います。彼らものデモを持っている背景画像のでマスクをスタイリング。

Answer 2

により不規則な形状に、あなたはおそらく、画像を探しています。そしてによる透明性のレベルを変化させるための必要性を、あなたはおそらく、選択項目の上に貼り付けてしまうの.pngをしたいです。

良い質問は、一つの方法は、光る円は選択された1つをカバーし、かつ異なるだけで、暗いPNGは、他のすべてをカバーしていた「選択」PNGを持っているだろう。

編集：しかし、あなたはおそらく車輪の再発明と時間のトンを保存しないようにと、むしろあなたの自己scrathからすべてをコーディングよりも、jQueryのようなライブラリを使用するとよいでしょう：D

Answer 3

おそらくPNGの画像は、穴の正方形に動作します。