特定の形状の背景を含んでいます（ダイヤモンドなど）

Question

背景を特定の形状に限定しようとしています。

例：divタグまたはimgタグが正方形です。それから、私はその部分（コーナー）を透明にし、その一部（中間の菱形）を特定の色（背景色）または特定の画像（背景画像）にします。

透明なダイヤモンドを中央に置いた白いpngファイルを作成し、背景が菱形でのみ表示されるように画像の背景を設定してシミュレーションできます。

エッジの周りに表示されている白い部分（たとえば、中央に白いダイヤモンドが付いた透明なpngを持つ）を取り除きたいが、背景がエッジ上にしか表示されない。だから基本的には、私はではない透明でないと、どこにそれを表示するには、背景に画像をしたいですはは透明です。私はこれが画像で行わなければならないことはほとんど確信していますが、あなたに別の選択肢があるなら、私に教えてください。

http://jsfiddle.net/r7jxm/の例を示します。すべての画像に透明でなければならない白い辺があることがわかります。下の画像は見えません。私はまだCSSで最後の背景色を変更することができる必要があります。

Answer 1

最高のサポートはありませんが、CSS masksがあります。

彼らはあなたが望むものを達成するように聞こえます。