サイト上の画像を異なる幾何学的形状であるかのようにレンダリングしようとしています。たとえば、通常は正方形の画像を、六角形、円、五角形、八角形などとして表示できます。
これはレスポンシブ サイトです。つまり、元の画像は でスタイル設定max-width: 100%;
され、コンテナ要素に応じてサイズが変更されます。
私が最初に考えたのは、いくつかの透明なPNG「オーバーレイ画像」を作成し、必要な幾何学的形状を透明領域に「ノックアウト」してz-index
から、元の画像の上にマスクをオーバーレイすることでした。
キャンバスまたは SVG (またはその他のもの) でこれを行うより良い方法はありますか? ブラウザー ウィンドウのサイズが変更されたときに画像とマスクのサイズを均等に変更できますか? どのようなパフォーマンスの考慮事項を考慮する必要がありますか?
最終的な製品コードは jQuery を使用するため、これらのアプローチのいずれかで jQuery が必要な場合は、jQuery が使用されます。