- ベストアンサー
インラインフレームの半透明化
- インラインフレームの半透明化について、参考にしたページでうまく実現できない状況です。
- インラインフレームのソースコードには、疑似インラインフレームを作るためのCSSが含まれています。
- 半透明化のプログラムをどこに記述すれば良いかわからず、アドバイスをいただきたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
インラインフレームじゃありませんよ!! 要素なり、画像を透明化するにはCSS3の opacityプロパティで行ったり、色の値をrgba()で指定します。 [Sample]下記はタブを＿に置換してあるので戻すこと。 <div class="article"> ＿<h2>A smaller heading</h2> ＿<p> ＿＿本文記事がここ ＿</p> </div> <div class="article"> ＿<h2>A smaller heading</h2> ＿<p> ＿＿本文記事がここ ＿</p> </div> に対して・・ body{background:url(./images/A.jpg);} div.article{ border: solid 1px #808080; width: 240px; height: 120px; padding: 0.5em; overflow: hidden; opacity:0.3; background-color:white; } div.article+div.article{ opacity:1; background-color:rgba(255,255,255,0.3); } 最初のdiv.articleは全体を半透明(0.3)、二つ目は背景だけ半透明にしています。
お礼
回答ありがとうございます。 すでにできているif文によって背景を変えるプログラムに新たに インラインフレームを追加したいのですが、たいへん気が引けるのですが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>sample</title> <script language"JavaScript"> function my_clock(){ var h, m, s; var hh, mm, ss; mydate= new Date(); h=mydate.getHours(); hh=h+":"; m=mydate.getMinutes(); mm=m+":"; s=mydate.getSeconds(); mytime=hh+mm+s; sam1.innerHTML=mytime; } </script> <script language="JavaScript"> now = new Date(); hour = now.getHours(); b1 ="<body background='aozora.jpg' text='green'>" b2 ="<body background='yuuhi.jpg' text='black'>" b3 ="<body background='hosizora.jpg' text='yellow'>" if (hour >=7 && hour <15) document.write(b1); else if(hour >=15 && hour <23) document.write(b2); else document.write(b3); </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> </head> <body onload="timerID=window.setInterval('my_clock()',250);" textcolor="black" text="white"> <div style="width : 711px;height : 42px;top : 6px;left : 19px; position : absolute; z-index : 1; " id="Layer3" align="center"> <DIV id="sam1" style="font-size:24pt"></DIV> </div> <div style="width : 711px;height : 17px;top : 41px;left : 39px; position : absolute; z-index : 2; " id="Layer2" align="center"> <HR> </div> </body> この中のどこにインラインフレームを記述すればいいでしょうか？ ご教示お願いします。
【記述例】 <style type="text/css"> .logbox { border: solid 1px #808080; width: 240px; height: 120px; padding: 0.5em; overflow: hidden; filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; } p { color: #008000; } </style> ↑ の filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; の部分が半透明のコードです。 上の例は25％の表示です。 ※ *.logbox とか q とか、不適切なcssは修正しました。 基本的なcss記述の方法をもう一度確認することをオススメします。
お礼
回答ありがとうございます。 インラインフレームの色とかどうやって変えますか？ 応用がききません。
お礼
回答ありがとうございます。 どうしてもインラインフレームはできるのですが、 インラインフレーム内に表示される透明化されたファイルを つくることができません。 ちょっと回答者さんのやり方は、難しいので もっちょっと簡単なプログラムでお願いします。