WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:CSS,alphaについて

0:[投稿] hal [2004/03/03 12:14 ][環境:IE6のみで表示できればOK  ]

2度目の投稿になります。
よろしくお願いします。

CSSでBOX,alphaを使い、背景を半透明にして、
中にいれるテキスト、画像は半透明化させないようにしたいのですが、CSSまたはhtmlの指定でできますか?

.textbox{
 width: 500px;
 background: #FFFFFF;
 border:solid 1px #888888;
 filter:Alpha(opacity=60);
 }
.text{
 width:480px;
 font-size: 12pt;
 color:#000000;
}


<div class="textbox">
<div class="text">
テキスト
テキスト    
</div>
</div>
これだと中のテキストも半透明化してしまいます


1:[回答] 平野 敬 [MAIL] [URL] [2004/03/03 12:29 ]

http://d.hatena.ne.jp/inugamix/
こんな感じですか?


2:[質問] hal [2004/03/03 17:24 ]

ありがとうございます
こんな感じなのですが、
こちらのサイト様は透明化ではなく1枚の背景画像を使われているようですね。(これも素晴らしい^^

うーん他に方法は無いでしょうか?


3:[回答] 平野 敬 [MAIL] [URL] [2004/03/03 18:02 ]

>うーん他に方法は無いでしょうか?

ないことはありませんが,halさんが何を求めているのかがわかりません。半透明の見た目を実現することではなく,alpha()を使うことが目的なのですか?

とりあえず,以下のサイトから理想に近いものを探し出して解析してみるとか。

http://ike.s33.xrea.com/
http://www.geocities.co.jp/SiliconValley-SantaClara/1308/


4:[質問] hal [2004/03/03 18:47 ]

平野様ご回答ありがとうございます。
なかなか見つからないもので、投稿致します。

alpha指定した中で一部をalpha解除するような形で表現したいのです。
boxの背景色は半透明化するけれどbox内のテキストは透明化しないといった感じです。

全体の背景→box→テキストとあり、box部分だけを半透明化に、
その半透明化したboxを繰返し使用したいので、css,alphaで指定したいと思っております。


5:[回答] 平野 敬 [MAIL] [URL] [2004/03/03 22:37 ]

alphaを利用したものではありませんが,試しに作ってみました。WinIE6, MozillaFireFox0.8で表示確認しています。

http://www5d.biglobe.ne.jp/~quia/tmp/opacity/


6:[質問] hal [2004/03/04 17:31 ]

平野様ご回答ありがとうございます。

せっかく作って頂いたのに申し訳ないですが、
1pxの画像を背景に置くと背景によっては文字がチラチラ(黒文字だと黄・白色が入ったように見える)しますよね;;
制作したいものは背景が濃い色でその上に半透明のboxを置きたいんです。

<html>
<head>
<style type="text/css">
body {
 filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr="#5C7BFF",endcolorstr="#37C2FF",gradienttype=1);
}
.textbox{
 width: 500px;
 position: relative;
 background:#FFFFFF;
 padding: 10px;
 border:solid 1px #888888;
 filter:Alpha(opacity=50);
 font-size: 12pt;
 color:#000000;
 margin-top:200px;
 margin-left:200px;
}
</style>
<title></title>
<META name="robots" content="noindex,nofollow">
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div class="textbox">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
</body>
</html>

このように作った場合にtext部分を黒のまま維持できるようにと思ったのですが、もう少し自力で調べてみます。
ありがとうございました。


7:[回答] 白鳩 [2004/03/05 00:58 ]

ご存知かと思いますが、filter プロパティは MSIE 独自のものですので、他のブラウザでは反映されません。なので、本文などの重要な部分に使うのは避けた方が良いのではないでしょうか(色の組み合わせによっては完全に塗り潰されてしまうため)。

そういう意味で、私は平野さんの方法が(少なくとも現時点では)最良だと思います。


8:[回答] … [2004/03/05 05:56 ]

本当は,CSS の 'background-attachment' を利用するのが良いのでしょうが,
MacIE5, Opera7, Netscape7/Mozilla, Safari 辺りは完全実装しているのに,
“WinIE のみ” が,キャンバス以外の固定背景画像に未対応というところが痛い。
http://is.vis.ne.jp/lab/tests/background/test_1.html

でも,互換モードの状態でよければ,CSS とスクリプトの複合技で可能かも。
http://aor.ktplan.jp/gallery/fanny/winie.html
http://www.twin.ne.jp/~akr_m/free/free#f040222a

他には,アルファチャンネルを使ったPNG画像という手もあるけど,
これもまた,“WinIE のみ” が未だに対応していないなかったりする。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/PNG_descript.html

“WinIE のみで” という条件が既に非現実的という実装状況なので,
“WinIE 以外に” 愛着を持ってみるというのはどうでしょう。(笑

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World