スケスケに効くチェッカーボード(これでもcssネタ)

見出しだけで何のことかわかる人もいそうだ。

この画像:

こうみえて「透けている」。増上寺部分が市松模様になってるのはこれはブラウザの好意。

で、この「スケスケのデモ」としてこの png を html に素直に貼り付けたとしても、だ:

伝わらんわけでしょこれじゃ。

だからといって以下ではヘタするとミスリードを誘発しかねない:

1 img {
2     background-color: #5555ff;
3 }

このページは pillow のサンプルコードとともにその結果をみせることで、読者が即座にその意味を理解出来なければならないわけであって、これじゃぁ「青くなるんだぜ」ってサンプルなのかと思いかねんでしょう?

なのでやっぱし「ブラウザの好意」をもどきたいわけだね。しかも、だ。画像を「読む」ことによって起こるミスリードを防ぐためには、「画像だけに特別な背景」ではダメで、「いつも通りの背景が透けてまっせ」と一撃で理解出来て欲しいわけである。

てわけで「body の背景にしても邪魔に感じない(疲れない)穏健な市松模様背景」な css 表現はないかしらね、って話。

結局こうした:

1 /* 対象の html は div class="body" というクラスを持っている (ので body エレメントとは別) */
2 .body {
3     background-color: #ffffff;
4     background-image:
5         linear-gradient(45deg, #f8f8ff 25%, transparent 25%, transparent 75%, #f8f8ff 75%, #f8f8ff), 
6         linear-gradient(45deg, #f8f8ff 25%, transparent 25%, transparent 75%, #f8f8ff 75%, #f8f8ff);
7     background-size: 20px 20px;
8     background-position:0 0, 10px 10px
9 }