人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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要素を不透過にするにはどうすればよいのでしょうか?

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


1252468173
●拡大する


●質問者: ruijio
●カテゴリ:ウェブ制作
✍キーワード:2.0 background CSS FFF HTML
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● karaki
●100ポイント ベストアンサー

#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);
◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ