Web サイトで画像の透明度を使用すると、画像と Web サイトの背景色またはスタイルとの統合がより明確になります。ロゴ、アイコン、カスタムメイドのグラフィックなどのアセットは、デザインを損なうことなく Web ページのほぼどこにでも配置できるため、背景を透明にすると最大のメリットが得られます。ただし、画像の透明化の欠点の 1 つは、画像に透明部分が適用されていることを必ずしも簡単に見分けることができないという点で、これが貴重な手法でもあるからです。
この記事では、新しい機能を使用して画像の透明度を簡単に表示する方法について説明します 透明性 パラメーター。
imgix による画像の透明度
白い背景に表示すると、透明な画像は透明でない画像と同じように見えることがよくあります。下の 2 つの画像を見て、実際の動作を確認してください。見た目はまったく同じですが、2 つ目の画像には重要な特徴があります。場所によっては透明になっていることです。
![imgix ロゴに白い背景] (https://assets.imgix.net/imgix-logo.png?fm=jpg)![透明な背景の imgix ロゴ] (https://assets.imgix.net/imgix-logo.png)
画像の透明度が見えないことは、ストック画像を提供していて透明度を強調したいお客様など、一部のお客様にとって問題となります。そこで、画像の透明化が有効になっている場合に imgix ユーザーにはっきりと表示できるパラメーターを提供することで、この問題を解決することにしました。
チェッカーボードまたはグリッドの背景に透明な画像を表示することは、画像のどの部分が透明であるかを示すための標準となっています。新しい機能を使うと、imgix 画像にも同じ効果を加えることができます。 透明性 パラメーター。
追加するだけ 透明度=グリッド 透明度のある任意の画像に適用して効果を確認してください。
透明度=グリッド
デフォルトでは、グリッドのサイズは 4px ライトグレーの色を使用します (#D0D7DD) と白 (#FFFFFF)。
これらのデフォルトは、設定によって上書きできます。 グリッドサイズ そして グリッドカラー。たとえば、チェッカーボードを大きくて暗いものにしたい場合:
透明度 = グリッドとグリッドサイズ = 8 & グリッドカラー = 19232C、1F2C37
グレーのチェッカーボードのバリエーションが透明度を示す標準的な方法になりましたが、カスタマイズオプションもあるので、ちょっとした楽しみもあります。これは、型にはまらない背景を使った別のバージョンのロゴです。
透明=グリッド&グリッドサイズ=40&グリッドカラー=imgixブルー、imgixオレンジ
