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

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

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

透明に見える背景画像

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

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

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

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

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

コリス

画像やテキストも配置できます。

実際の動作は下記ページでご覧ください。
カラーやサイズなどを変更することができます。
※上記のCSSのカラー・サイズは日本語環境のPhotoshopに合わせて変更しています。

デモのキャプチャ

Transparent Image Background

top of page

©2017 coliss