何か解決策はありませんでしょうか？
また、tableにfilter: alpha(style=0, opacity=100);-moz-opacity:0.100;等と書いても無駄でした。
No.2
17
3
20pt
VML は、XML応用の、ベクトル画像情報をマーク付けする言語です。VML の優れた部分は、SVG の仕様に取り入れられました。VML は SVG の先祖のようなものと言えます。実際には、たとえば Google Maps が VML を使っています。
先の回答で載せた W3Cノートの、日本語訳がありました。
VML を (X)HTML文書で使うには、DHTML Behavior を使います。これについては以下が参考になります。
最後に、DIV要素の背景画像に半透明のPNG画像を指定するサンプルです。
No.3
9918
20pt
背景用のDIVを用意して下に敷いてはどうでしょうか。以下に例を書きます。CSSだけで実現しようとしました。制限として、heightは必ず指定しなければなりません。内容による高さの自動調整は効かないので注意してください(はみ出た部分は隠れます)。(JavaScriptで動的に背景DIVを作るという手もありますが、かなり複雑になります。)
1912
1869
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
body{
background-color:yellow;
}
#out{
height:50px; /* 指定する */
padding:0;
border:solid blue 2px;
overflow:hidden;
}
#contents{
width:100%;
height:50px; /* outのheightに合わせる */
marign:0;
padding:5px;
color:white;
position:relative;
z-index:1;
}
#back{
width:100%;
height:60px; /* outのheight + (contentsのpadding * 2) */
background-color:blue;
position:relative;
top:-60px; /* -(outのheight + (contentsのpadding * 2)) */
z-index:0;
filter:alpha(style=0, opacity=50);
-moz-opacity:0.50;
}
</style>
<script>
</script>
</head>
<body>
<div id="out">
<div id="contents">aaaa</div>
<div id="back"></div>
</div>
</body>
</html>
DOCTYPE宣言やブラウザによる解釈モード(Quirks、Standards)の違いにも対応させたつもりです。(単にStandardsに合わせただけですが＾＾；) お使いの環境で確認してみてください。
ダミーURL：http://q.hatena.ne.jp/]
No.4
9918
20pt
すみません、訂正させてください。
解釈モードの違いに対応する、と書いてしまいましたが、間違いです。CSSだけだとどちらかにしか対応できません。Standardsモードの例を再掲します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<style>
body{
background-color:yellow;
}
#out{
height:50px; /* 指定する */
padding:0;
border:solid blue 2px;
position:relative;
overflow:hidden;
}
#contents{
height:50px; /* outのhieghtに合わせる */
marign:0;
padding:5px;
color:white;
position:relative;
z-index:2;
}
#back{
width:100%;
height:60px; /* outのhieght + (contentsのpading * 2)に合わせる */
background-color:blue;
position:relative;
top:-60px; /* -(outのhieght + (contentsのpading * 2))とする */
z-index:1;
filter:alpha(style=0, opacity=50);
-moz-opacity:0.50;
}
</style>
</head>
<body>
<div id="out">
<div id="contents">aaaa</div>
<div id="back"></div>
</div>
</body>
</html>
Quirksモードにする場合は、paddingは考慮しなくていいですが、代わりにborder-widthを考慮する必要があります。(out以外のwidthを46px、backのtopを-46pxにする) 前の例はQuirksモードですが、ちょっとずれている上、Standardsモードにすると表示が崩れます・・・。
参考までにJavaScriptで動的にwidthとtopを調整する例を載せておきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<style>
body{
background-color:red;
}
#out{
padding:0;
border:solid blue 2px;
position:relative;
overflow:hidden;
}
#contents{
marign:0;
padding:5px;
color:white;
position:relative;
z-index:2;
}
#back{
width:100%;
background-color:blue;
position:relative;
z-index:1;
filter:alpha(style=0, opacity=50);
-moz-opacity:0.50;
}
</style>
<script>
<!--
//contentsに合わせてout、backのサイズと位置を調整する
function adjustBack(out, contents, back){
back.style.height = out.style.height = contents.offsetHeight + 'px';
back.style.width = out.style.wodth = contents.offsetWidth + 'px';
back.style.top = "-" + contents.offsetHeight + "px";
}
function init(){
var out = document.getElementById("out");
var contents = document.getElementById("contents");
var back = document.getElementById("back");
adjustBack(out, contents, back);
//ウィンドウサイズ変更時にもサイズ変更
window.onresize = function(){adjustBack(out, contents, back);};
}
// -->
</script>
</head>
<body onload="init();">
<div id="out">
<div id="contents">aaaa<br/>bbbb<br/>
ああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ
</div>
<div id="back"></div>
</div>
</body>
</html>
ダミーURL：http://q.hatena.ne.jp/]
No.5
30
20pt
解答になっていないかもしれませんが、考えたことです。
半透明のdivよりも、z-indexの数値が大きいdiv要素を用意すると、そのdiv要素は、半透明になりません。
URLは、ダミーです。
tyme
2008/05/18 16:31:25
1
1
実は英語で分からなかったのですが、VMLは根本的にはどういったものなのでしょうか？