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

Question

ruijio

57

55もっと見る

100pt

ウェブ制作

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

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

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

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

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

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

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

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

その際にｐタグは透かせたくなく、透過１００％にさせたいのです。

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

としてもｐの部分は90％の透過のまま

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

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

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

回答の条件

1人2回まで

登録：2009/09/09 12:49:34
終了：2009/09/09 17:32:13

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

karaki · Accepted Answer · 2009-09-09T16:16:00+09:00

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

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

ベストアンサー

karaki1762009/09/09 16:16:00

コメント（0件)

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