- 締切済み
objectタグを使って背景を透明にしたいのですが
objectタグを使ってindex.html内にmenu.htmlを表示させたのですが、呼び出したmenu.htmlの背景が白くなってしまいました。 個人的には重なっても背景を透明にし、index.htmlが見えるようにしたいと考えています。 対応策はあるでしょうか？お願いします。 【index.html】 <style> div#container { background: url(bg_container.jpg); } </style> </head> <body> <div id="container"> <object type="text/html" data="menu.html" width="200px" height="570px"></object> </div> </body> 【menu.html】 <style> body{ margin: 0; padding: 0; overflow: hidden; border: none; } div#menu_in { width: 200px; height: 570px; } </style> </head> <body> <div id="menu_in"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞やっぱり無理ですかね？ あなたがどこかで、背景を白にしているからです。 簡単なサンプルです。 ★タブは＿に置換してあるので戻す [index.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} body{background:url(./images/background/sky.jpg) rgb(200,200,255)} div.header,div.section,div.footer{margin:0 auto;width:80%;position:relative;} div.section>*{margin-left:22%;width:78%;} div.section p.object object{display:block;position:absolute;top:0;left:0;width:20%;height:100%;border:solid red 1px;margin:0;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p class="object"> ＿＿＿<object type="text/html" data="menue.html" width="200" height="200"> ＿＿＿＿ご利用のブラウザはobjectに対応していません。<a href="menue.html"></a>をご覧ください。 ＿＿＿</object> ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [menue.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>Untitled</title> ＿<meta name="author" content="IRUKA"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<link rel="NEXT" href="./page1.html"> ＿<link rel="SHORTCUT ICON" href="/favicon.ico"> ＿<link rel="ICON" href="/favicon.ico"> </head> <body> ＿<ul> ＿＿<li>あいうえお</li> ＿＿<li>かきくけこ</li> ＿＿<li>そしすせそ</li> ＿＿<li>たちつてと</li> ＿</ul> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
objectで呼び出されるHTMLで背景色を指定していない限り、background-colorはデフォルトのtransparentのはずです。ブラウザによってブラウザの持つスタイルシートが白でしたら、そのhtmlで背景色を指定すれば良いです。ブラウザのデフォルトのスタイルシートは、カスケーディングの最下位ですから。
補足
index.htmlとmenu.htmlの両方のbodyのstyleに「background-color: transparent;」を記述しましたが変化ありませんでした。 やっぱり無理ですかね？