CSS / 背景

CSS / 背景 / 画像
CSS / 背景 / グラデーション

格子模様を描く

背景に格子模様(マトリクス、方眼、罫線、市松模様)を設定したい場合。

このようにする。

#hoge{
    background-image:
        linear-gradient(90deg, #000 1px, transparent 0),
        linear-gradient(#000 1px, transparent 0);
    background-size: 20px 20px;
}

グラデーションは背景の image として扱われる、複数貼れる、背景は敷き詰めることができる、ということを利用している。

はっきり分かれたグラデーションとして1pxの線を縦と横に引いてそれを重ね合わせてさらに大きさ指定で敷き詰めると格子模様になるという仕掛け。

css/background/start.txt · 最終更新: 2021-12-02 12:29 by ore

文書の先頭へ

CSS / 背景

menu

書いてる野郎

CSS / 背景

格子模様を描く