
CSSだけでPhotoshopのような透過用格子背景
Webページで画像をページ上に貼る際、背景色が白一色の場合、白の画像は同化されて見えなくなってしまうことがあります。
背景色をグレーまたは黒にすれば白の画像でも見えるようになりますが、今度はグレーまたは黒の画像が見えなくなってしまうことがあります。
そんなとき、Photoshopのようなグレーと白の透過画像用の格子背景を使えば、どちらのパターンの画像でも視認できるようになります。
以下の透過用格子背景はHTMLとCSSだけで作成されています。

logo-white.png

logo-black.png
logo.svg
やり方はまず、:rootで「--bg-size: 20px;」で格子のサイズを宣言して、linear-gradientで格子の基礎部分を描画します。
linear-gradientだけでは描画できないので、background-sizeとbackground-positionで格子のサイズと位置を以下のように調整します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | :root { --bg- size : 20px ; } .bg- transparent { background-color : #fff ; background-image : linear-gradient ( 45 deg, #ccc 25% , transparent 25% ), linear-gradient ( -45 deg, #ccc 25% , transparent 25% ), linear-gradient ( 45 deg, transparent 75% , #ccc 75% ), linear-gradient ( -45 deg, transparent 75% , #ccc 75% ); background-size : var(--bg-size) var(--bg-size); background-position : 0 0 , 0 calc(var(--bg-size) / 2 ), calc(var(--bg-size) / 2 ) calc(var(--bg-size) / -2 ), calc(var(--bg-size) / -2 ) 0 ; } |
このようにコードを作成すればページAでは20pxの格子だが、ページBでは40pxの格子で背景を描画したいときは「--bg-size: 40px;」に変えるだけで変更できるので便利です。
CSSだけでPhotoshopのような透過用格子背景を描画したサンプル