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(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, 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のような透過用格子背景を描画したサンプル
