2007年5月4日金曜日

 

透過 png 画像(IE6以下未対応)

角丸にチャレンジ - 透過PNG画像+CSS編

    background:transparent url(画像パス) no-repeat 0px 0px;

このtransparentというのがポイントらしい。no-repeatにしてるのは背景画像が繰り返されて透過されなくなるためかな。

transparentについて

※ページのキャッシュ
背景色やボーダーの色にはtransparentという値を設定できます。これは親ボックスの背景色と同じ色を指定していることと同じことであり、あたかも透明色を指定したように振舞います。

ccsのプロパティで値に色をとるものはcolor background-color border-colorなど数多い。~中略~css2からシステムカラーやtransparentも登場しました。

~中略~

システムカラーとは閲覧者のGUI環境、つまりデスクトップの背景色やウィンドの文字カラーと同じ色を使用することでよりアクセシビリティの高いページを作成することが出来ます。

システムカラー

ActiveBorder
アクティブなウィンドウの境界線
ActiveCaption
アクティブなウィンドウのタイトル
AppWorkspace
アプリケーションの背景
Background
デスクトップ背景
ButtonFace
ボタンの表面
ButtonHighlight
ボタンのハイライト
ButtonShadow
ボタンの影
ButtonText
ボタンの文字
CaptionText
タイトルの文字やスクロールバーの矢印、ウィンドウの4隅のサイズ変更ボックスの色
GrayText
選択できない文字の色
Highlight
選択領域
HighlightText
選択領域の文字
InactiveBorder
アクティブではない境界線
InactiveCaption
アクティブではないウィンドウのタイトルバー
InactiveCaptionText
アクティブではないタイトルの文字
InfoBackground
ツールチップの背景色
InfoText
ツールチップの文字
Menu
メニューの背景
MenuText
メニューの文字
Scrollbar
スクロールバーの表面
ThreeDDarkShadow
立体オブジェクトの暗い影
ThreeDFace
立体オブジェクトの表面
ThreeDHightlight
立体オブジェクトの選択時
TreeDLightShadow
立体オブジェクトの明るい影
TreeDShadow
立体オブジェクトの影
Window
ウィンドウの背景
WindowFrame
ウィンドウの枠
WindowText
ウィンドウの文字

参考

jmblog.jp
http://jmblog.jp/

ラベル: ,




この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google