jQueryクリッピングマスク？

divのクリッピングマスクを作成するのに最適なjQueryプラグイン（または他のjavascriptメソッド）は何ですか？jQueryクリッピングマスク？

私はマスク（三角形）とイメージを持っているとしましょう。マスクを使用して三角部分のみを表示するにはどうすればよいですか？

私は、画像に1枚の画像を使いたいと思っています。その上に三角形の穴がある別の絶対配置されたdiv（透明な.png）を置いています。

SOOOOOO ??? ....：D

出典

2011-02-08 Cristy

答えはありませんが、FYIのみですが、CSSクリッププロパティは1つの図形しかサポートしていません。 rect。 – Gregg

はhtml5オプションですか？ – ScottE

確かに、CSS、jQuery、HTML5、CSS3など... – Cristy

あなたはHTML5に開放している場合は、canvas要素を見てください。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

出典

2011-02-15 19:00:09 ScottE

これはmozillaでのみ動作しますか？私はクロスブラウザソリューションを探しています – Cristy

サポートされているブラウザとIE上のVMLにキャンバスを描画するライブラリ（excanvas => http://code.google.com/p/explorercanvas/）があります。 API – stecb

@Cristy - あなたはhtml5が大丈夫だと言った。これは、あなたがクロスブラウザを見ていないことを意味します！しかし、@ stewebのライブラリは面白いです。 – ScottE

あなたがマスクするだけでその画像であれば、あなたはクロスブラウザでもIE6で動作RaphaelJsライブラリを使用することができます。基本的には、図形を描画して、あなたのイメージでそれを埋める：

var paper = Raphael(document.getElementById("notepad"), 400, 400); 
var r = paper.g.triangle(200, 200, 190); 

r.attr({ 
    stroke: "none", 
    fill: "url(http://www.bing.com/fd/hpk2/NabobPass_EN-US1703601557.jpg)" 
});

ライブデモ：

http://jsfiddle.net/eybNG/

私の例では、私はに、それは非常に簡単になり、余分なライブラリgRaphaelを使用していることに注意してください三角形を描く。しかし、これは必須ではありません。

出典

2011-02-19 11:59:19 Richard

jQueryクリッピングマスク？

答えて

関連する問題