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

今、CSSのfilter: alpha(style=0, opacity=80)と-moz-opacity:0.80を使用して、divの背景色を半透明にしておりますが、そのdiv内に書いたテーブルなどの色も半透明になってしまいます。

何か解決策はありませんでしょうか?

また、tableにfilter: alpha(style=0, opacity=100);-moz-opacity:0.100;等と書いても無駄でした。

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:Alpha CSS MOZ 無駄 背景色
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Bill閣下
●20ポイント

VML を使うと可能です。他のブラウザとの兼ね合いには Conditional Comments を利用すると良いと思います。

◎質問者からの返答

実は英語で分からなかったのですが、VMLは根本的にはどういったものなのでしょうか?


2 ● Bill閣下
●20ポイント

VML は、XML応用の、ベクトル画像情報をマーク付けする言語です。VML の優れた部分は、SVG の仕様に取り入れられました。VML は SVG の先祖のようなものと言えます。実際には、たとえば Google Maps が VML を使っています。

先の回答で載せた W3Cノートの、日本語訳がありました。

VML を (X)HTML文書で使うには、DHTML Behavior を使います。これについては以下が参考になります。

最後に、DIV要素の背景画像に半透明のPNG画像を指定するサンプルです。


3 ● susie-t
●20ポイント

背景用のDIVを用意して下に敷いてはどうでしょうか。以下に例を書きます。CSSだけで実現しようとしました。制限として、heightは必ず指定しなければなりません。内容による高さの自動調整は効かないので注意してください(はみ出た部分は隠れます)。(JavaScriptで動的に背景DIVを作るという手もありますが、かなり複雑になります。)

<!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/]


4 ● susie-t
●20ポイント

すみません、訂正させてください。

解釈モードの違いに対応する、と書いてしまいましたが、間違いです。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/]


5 ● かもねぎ
●20ポイント

解答になっていないかもしれませんが、考えたことです。

半透明のdivよりも、z-indexの数値が大きいdiv要素を用意すると、そのdiv要素は、半透明になりません。

URLは、ダミーです。

http://q.hatena.ne.jp/

関連質問


●質問をもっと探す●



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