1252468173 jQueryを用いた透明化に関して質問です。

  ※結果としては添付画像のようなことがしたいです。

<div id="wrap">
<p>こんにちわ</p>
</div>

上記のhtmlにて、wrapのcssを
width:100%;
height:100%;
background:#fff;

などとして、全画面に白い枠をかけ、

jQueryにて下記を掛けて、透過90%にし、背景にあるものをうっすらすかせて見せてます。

$("#wrap").fadeTo(1000,0.9);

※fadeToは第一引数でミリ秒。第二引数で透明度を設定(0は透明、1は不透明)

その際にpタグは透かせたくなく、透過100%にさせたいのです。

$("#wrap p").fadeTo(1000,1.0);

としてもpの部分は90%の透過のまま

ためしに、第二引数を2.0とかにしても変化ないです。

外側のwrap要素を90%の透過にし、
内側のp要素を不透過にするにはどうすればよいのでしょうか?

お教えいただければと思います。よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2009/09/09 12:49:34
  • 終了:2009/09/09 17:32:13

ベストアンサー

id:karaki No.1

karaki回答回数17ベストアンサー獲得回数62009/09/09 16:16:00

ポイント100pt

#wrapに透過処理をしてしまうと、その下の階層すべてに影響してしまいます。

なので、#wrapの下に#fadeなどを設けて#wrapの代わりに透過させてやればよいと思います。

HTML

<div id="wrap">
  <div id="fade"></div>
  <p>こんにちは</p>
</div>

CSS

#wrap {
  width: 100%;
  height: 100%;
}
#fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#wrap p {
  position: relative;
  background-color: #fff;
}

Javascript

$("#fade").fadeTo(1000,0.9);
id:ruijio

回答ありがとうございます。

透明化させてる要素の中でいくら足掻いてもだめだったって事ですね。おっしゃるとおり兄弟要素にして、解決できました!

ありがとうございました。

2009/09/09 17:32:04

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません