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


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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/08/23 16:55:46
  • 終了:2006/08/30 17:00:04

回答(5件)

id:Bill No.1

Bill閣下回答回数17ベストアンサー獲得回数32006/08/23 17:33:23

ポイント20pt

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

id:makocan

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

2006/08/23 19:39:01
id:Bill No.2

Bill閣下回答回数17ベストアンサー獲得回数32006/08/23 21:05:35

ポイント20pt

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

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

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

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

id:susie-t No.3

susie-t回答回数99ベストアンサー獲得回数182006/08/24 11:36:09

ポイント20pt

背景用の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/]

id:susie-t No.4

susie-t回答回数99ベストアンサー獲得回数182006/08/24 16:49:51

ポイント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/]

id:d4-1977 No.5

かもねぎ回答回数3ベストアンサー獲得回数02006/08/25 00:46:20

ポイント20pt

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

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

URLは、ダミーです。

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

  • id:tyme
    Operaにも対応するとしたら

    #back{
    width:100%;
    background-color:blue;
    position:relative;
    z-index:1;
    filter:alpha(style=0, opacity=50); /* IE */
    -moz-opacity:0.50; /* Mozilla(Firefox含む) */
    opacity:0.50; /* Opera */
    }

    /*
    私の場合面倒なので、画像でごまかしてます。
    透過画像で背景pngを用意して下記を対応すれば、文字は透過せずに済みます。例ということで。
    http://www.designwalker.com/2006/12/transparent-png2.html
    */

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません