ここから本文です

CSSを使った背景透過に関する質問です。

このエントリーをはてなブックマークに追加

質問者

dhizerethingさん

2011/12/1418:36:31

CSSを使った背景透過に関する質問です。

CSSのプロパティ、「opacity」を使って背景を透過するに関して
例えば、

<div id="wrap">
<div id="main">
</div>
</div>

上記のwrapにopacityで透過をかけると、中のmainまで透過されてしまいますが
wrapだけにopacityを適用させるいい方法はないでしょうか?
恥ずかしながら今のところ
mainをwrapの外に出して「position」で無理やりwrapの中に持ってくるぐらいしか方法が思いつきません。

宜しくお願いします。

閲覧数:
439
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

グレード

カテゴリマスター

rishorusさん

編集あり2011/12/1501:37:52

先のお二人のご意見に賛成しますが、IE8 を切り捨てる必要はないですよ。

#wrap {
background-color: transparent; /* 古いブラウザ用、あるいは透過 PNG でもメッシュ画像でも */
background-color : rgba(0, 255, 0, 51) ; /* 新しいブラウザ用の設定で上書き */
}


---
CSS Color L3 が既存の rgb() を拡張するのでなく rgba() という新しい疑似関数を設けたのは、「未知のものは無視する」という CSS の大原則と上書き機構を使うことで、古いブラウザもサポートできるようにという配慮です。

規定書にはちゃんと書いてあるのですが、巷のリファレンスでは書き落としている可能性があるかも(リファレンスが注意事項まで丁寧に拾ってくれれば良いのですが)。
http://www.w3.org/TR/css3-color/#rgba-color

質問した人からのコメント

2011/12/17 10:19:22

降参 おかげさまでIE6でも表示されるようになりました。
みなさんどうもありがとうございました。

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル
  • このエントリーをはてなブックマークに追加

このQ&Aで解決しましたか?質問する

閉じる

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

memory_agapeさん

編集あり2011/12/1502:31:24

0~127ではなく0.0~1.0でした。他の言語での指定とごっちゃになってました。すいません。
#wrap {
/* 緑の40%透過 */
background-color : rgba(0, 255, 0, 0.4) ;
}
---
IE8以下を切り捨てるならrgbaを使って透過色を指定することもできます。
a(alpha)は0~127の範囲で指定します。
#wrap {
/* 緑の40%透過 */
background-color : rgba(0, 255, 0, 51) ;
}

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アップロード写真

カテゴリマスター

dobinn69yさん

2011/12/1420:06:26

透過pngを使うのはどうでしょう

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

ID/ニックネームを選択し、「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。

ほかのID/ニックネームで利用登録する