透明感のある背景を作る

Webサイト作成 TIPS
css

CSSで透明感のある背景を作る

背景を透かして、後ろの画像などを表示させることができます。
最近はWindows Vistaのエアロなどの影響か?妙にこういった透明テクは多く見られるようになりました。

次のように設定します。
testというtdの背景を透かす場合

 -css-
 td#test {background: transparent}
 -html-
 <td id="test"> テスト</test>

です。

しかし、ただ背景が透けるだけではまだイマイチです。
ここで一工夫します。borderの濃い色や、薄い色で囲むと、より透明であるということが強調されます。

上記のコードをこう変更します。

 -css-
 td#test {background: transparent ;
          bordert:1px solid #ffffff;
          }
 -html-
 <td id="test"> テスト</test>

ちょっと透明なpng(白や黒などで塗りつぶして、透明にしたもの)を適当に作成し、それを透けさせることでも可能です。

カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です