[CSS]デザイナーには透明に見えてしまう背景を実装するスタイルシートのテクニック

サイト構築 -CSS

Post on:2017年6月12日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

透明が見える、というのはおかしな日本語ですが、どこからどう見ても透明な背景を実装するスタイルシートのテクニックを紹介します。

透明な背景を使いたい時用に、スニペットに登録しておくと便利です。

サンプル: 透明に見える背景画像

HTMLは非常にシンプルです。
div要素など、背景を適用できる要素を用意します。

<div class="bg-img-transparent"></div>

1	<div class="bg-img-transparent"></div>

透明に見えてしまう背景はCSSで作成します。
サイズは適宜、変更してください。

.bg-img-transparent {
  width: 500px;
  height: 500px;
  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%);
}

.bg-img-transparent {

width: 500px;

height: 500px;

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%);

}

これだけでOKです。
下記は画像ではなく、上記のコードで作成されています。

単なるdiv要素の背景なので、画像でもテキストでもそのまま配置できます。