ここから本文です

解決済みのQ&A

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

dhizerethingさん

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

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

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

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

宜しくお願いします。

  • 質問日時:
    2011/12/14 18:36:31
  • 解決日時:
    2011/12/17 10:19:22
  • 閲覧数:
    410
    回答数:
    3
  • お礼:
    知恵コイン
    100枚

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

rishorusさん

先のお二人のご意見に賛成しますが、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/15 01:37:52
  • 回答日時:2011/12/15 01:19:27

質問した人からのお礼

  • 降参おかげさまでIE6でも表示されるようになりました。
    みなさんどうもありがとうございました。
  • コメント日時:2011/12/17 10:19:22

グレード

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

(2件中1〜2件)

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

 

memory_agapeさん

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

  • 違反報告
  • 編集日時:2011/12/15 02:31:24
  • 回答日時:2011/12/15 00:38:18

dobinn69yさん

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

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

総合Q&Aランキング

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

知恵コレに追加する

閉じる

知恵コレクションをするID/ニックネームを選択し、「追加する」ボタンを押してください。
※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。

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