WEB相談室

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

タイトル:ページの背景色にfilter効果を

0:[投稿] 煌那 [2002/08/23 23:33 ][環境:WIN+IE わからない]

ページの背景色にだけfilterの効果Alphaを使ってグラデーションの様に仕上げたいのですが(できれば外部スタイルシートで)、BODY要素としてしかうまくいきません。しかもBODY要素にすると、BODY内部のモノすべてにfilterがかかってしまいます…。すごく素人な質問かもしれませんが、どなたか教えてください。よろしくお願いします。<m(__)m>


1:[回答] [2002/08/24 00:38 ]

低性能なPC環境だとページが重くなりそう。


2:[回答] saori [2002/08/24 11:19 ]

子要素にスタイル指定をしてみてください。

『カスケーディング』
http://www.parkcity.ne.jp/~chaichan/src/style.htm#kasu


3:[回答] saori [2002/08/24 19:31 ]

参考ページの選び方がずれてました
すみません。

『継承について』
http://anslasax.net/css-make/inheritance.html
『背景色』
http://anslasax.net/css-make/property/b-ground.html#bg-color


4:[回答] Operaユーザー [2002/08/24 19:40 ]

filterが効かない環境でもちゃんと見えるように工夫してね。


5:[質問] 煌那 [2002/08/24 22:44 ]

様々なご意見ありがとうございます!
ですが、バカな私はいまいち把握できてなかったりします…せっかくアドバイスいただいたのに本当にスイマセン(TOT)
実はそのページには背景画像の固定もしていたりします。アドバイスにのっとり色々試してはみるものの、どうしてもページ全体のみfilterをかける方法がうまくいきません…。やはり、低性能なPCの方や、filterの効かないPCの方を考えると、妙な拘りを捨てて、filter効果のない一色の背景色にした方が無難でしょうかね…?


6:[回答] saori [2002/08/24 23:27 ]

>>ですが、バカな私はいまいち把握できてなかったりします
いえ、わたしも説明がじょうずぢゃないので、すみません。
どこまでご説明したらよいのか把握できていませんので、
例えば、資料として出したどのURLのページの何行目あたりの説明が分からないとか、
どの用語がわからないとか、書いていただければ補足説明させていただきます。

それから、HTMLと、CSSソースを出していただけると皆さんから的確なアドバイスがいただけるかもしれません。

>>4
>filterが効かない環境でもちゃんと見えるように工夫してね。
ちょっと補足させていただくと・・・・
さらに、作ったページがCSSを外しても内容が理解できるかチェックしてみるといいかも?です。

同じようにMSIE独自拡張の話題がありましたので参考まで。
『IE&NNでテーブルを半透明』
http://www.parkcity.ne.jp/~chaichan/qanda/qa3049.htm?02-08-21-18-51


7:[回答] 煌那 [2002/08/25 11:20 ]

ありがとうですsaoriさん!早速お言葉に甘えて私が作ったCSSソースを載せてみました…。下の二つのソースをどちらもBODYセレクタで外部シートに書き、HTML文書内にLINKさせている状態です…。(>_<)
この1つ目のfilterをページ全体の背景色でのみ生かしたいのですがBODYセレクタとしている所為で全部にこのfilterがかかってしまうわけです…。自分のやろうとしている事が無謀なのでしょうか…?(+_+)

{WIDTH: 100%;
background-color:#03B2EB;
FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX=20,finishX=100,startY=0,finishY=0); }

{background-color : transparent ;
background-image : url(***.gif);
background-repeat : no-repeat ;
background-position : 90% 90% ;
background-attachment : fixed ;
margin : 0 ;}


8:[回答] saori [2002/08/25 13:46 ]

HTMLとCSSの両方を全部見せていただけるとご説明がしやすいです。
文章の構成がどうゆうふうになっているのか分からないので例を書きます。


すごく簡単な例なんですけど<body>開始タグと、</body>閉じタグの間に囲まれている中に
<p>一つ目の文章</p>←これを入れてみます。


<body>

<p>一つ目の文章</p>

<body>

この場合は、親要素がbodyで子要素がpです。

-----------------------------------------

次にもう一個子要素を入れてみます。
<div>ふたつ目の文章</div>←これをいれます。

<body>

<p>一つ目の文章</p>
<div>二つ目の文章</div>

<body>

すると子要素はpとdivの2個です。

-----------------------------------------

画像もいれてみます。

<body>

<p>
一つ目の文章
<img src="画像のURL">
</p>
<div>二つ目の文章</div>

<body>

この場合はbodyからみるとimgは孫要素です。

-----------------------------------------

親要素のbodyにスタイルを指定すると、子要素や、孫要素には、先にご紹介した『承継』があります。

要素にはそれぞれスタイルを定義することができますのでbodyだけではなくて
子要素や、孫要素にもスタイルの定義をすることで、
全部にfilterがかかってしまうのは避けられます。

例えばこんな↓感じです。
body{プロパティ:値;}
p{プロパティ:値;}
div{プロパティ:値;}
img{プロパティ:値;}

正確にはbackgroundは『継承』ではなくて
初期値は transparent(透明)なのでbodyが透けて見えているのですが
子要素にbackgroundを指定しなければfilterがかかった背景になってしまいます。
子要素のpだけbackgroundを指定して、divは透明のままとかも指定のしかたでできます。


参考になるページ
『スタイルなCSSの基礎講座』
http://www.parkcity.ne.jp/~chaichan/src/style.htm
全部読んでみたらイイかも?です。

それから、>>7の上の方のソースを見せていただいた勘なのですけど・・・・
ページを作るときにオーサリングソフト(手でタグの文字を一個ずつ打たなくてもできるソフト?)で
作っているとしたら、ソフトごとに使い方がたぶんある(謎)なので
ヘルプとか説明書にやりかたが書いているかもしれません。


9:[回答] 煌那 [2002/08/26 14:20 ]

本当にありがとうございます!さっそく試してみます!m(__)m
そして、もっともっと参考ページをみてCSSを勉強しますね!
(*^_^*)

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World