【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。

さてさて。タイトルのとおり、そのまんまです。

まずはデモをご覧ください。

DEMO : https://on-ze.com/demo/css-bg-transparent/

背景全面を覆うと目がチカチカしてしまいますが、特定の職業の方には透明に見えるはずです。

実装方法は以下のとおり。

.bg-transparent {
width:100%;
height:100%;
margin:0;
background-position: 0px 0px, 8px 8px;
background-size: 16px 16px;
background-image: -webkit-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),
-webkit-linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #eee 100%);
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),
linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc 100%);
}

CSS3の「background:linear-gradient();」を巧く使っています。
利用機会は少ないかと思いますが、頭の片隅に入れておいて損はないと思います。