- ベストアンサー
背景色を２色表示させたい
ＨＴＭＬを始めたばかりの初心者です。 スタイルシートを使ってメール用のひな形を作っているのですが、わからないところがあるので教えてください。 どの本やサイトを見ても背景色を２種類表示させる指定が載ってないのです。 そういったことは可能ですか？ たとえば上から７０ピクセルをＡの色で表示させ、その下から全てをＢの色で表示させたいのです。さらにＡの色の上に背景透過性の画像を横並びで表示させたい・・（画像の背景色は使いたくないので）。 メールのひな形ですのでテキストは一切入力しません。画像のみです。 稚拙な質問ですみません。よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ひとつの要素に二つの背景色を与えることはできません。 ですから、BODY要素に背景色Bを与え、上から高さ70pxのDIV要素（スタイルコンテナ）を用意して、そこに背景色Aと背景画像（透過指定したGIFになるでしょうね）を与えてください。 <BODY style="background-color:#000000;color:#FFFFFF"> <DIV style="height:70px;background-color:#FFFF00;color:#000000"> <P>背景色A</P> </DIV> <P>背景色B</P> </BODY> #例では背景画像入れてません。書くの面倒だったので(^_^;)
その他の回答 (1)
- starflora
- ベストアンサー率61% (647/1050)
それは、テーブルで可能です。 ただ、テーブルだと、左右上下が、４ピクセルだったかデフォルトで開きますから、これを詰めるため、スタイル・シートで、マージンをゼロ・ピクセル指定してください。指定法は、スタイルシートの本に載っていると思います。 こうして、四隅のマージンをゼロにしたあと、次のスクリプトでテーブルを造ります。 ===================================== <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%"> <tr width="100%" height="70" bgcolor="#0000ff" background="back1.gif"> <td width="100%" height="70"> </td> </tr> <tr width="100%" height="1000" bgcolor="#00aa00" background="back2.gif"> <td width="100%" height="1000"> </td> </tr></table> </body> </html> ===================================== back1.gif と back2.gif は、最初から「透過ＧＩＦファイル」でなければなりません。ｈｔｍｌを使っても、ＣＳＳを使っても、ｊａｖａｓｃｒｉｐｔを使っても、画像の背景を透明にすることはできません。（なお、テーブルの幅指定は間違いないですが、高さ指定は、テーブルについての解説を見て、確認してください。二重に指定しているのですが、うまく行かない可能性があります（わたしはスペーサか透明画像をサイズ指定して普通入れます）。 これは、画像を背景として並べています。（第一の高さ７０ピクセルのセルは、背景の色が青です。第二の高さ１０００ピクセルのセルは、背景が緑です）。
お礼
ありがとうございました。 なにせ初心者なので書いてあることはわかっても、いざ自分で画像入れて入力文字位置をいれて～となると、なかなかうまくいかなくて時間がかかってしまいました。 でも、なんとか完成できました。ありがとうございました。