背景色を２色表示させたい

解決済

質問者：fairypipi
質問日時：2001/11/19 08:37
回答数：2件

ＨＴＭＬを始めたばかりの初心者です。
スタイルシートを使ってメール用のひな形を作っているのですが、わからないところがあるので教えてください。

どの本やサイトを見ても背景色を２種類表示させる指定が載ってないのです。
そういったことは可能ですか？
たとえば上から７０ピクセルをＡの色で表示させ、その下から全てをＢの色で表示させたいのです。さらにＡの色の上に背景透過性の画像を横並びで表示させたい・・（画像の背景色は使いたくないので）。
メールのひな形ですのでテキストは一切入力しません。画像のみです。

稚拙な質問ですみません。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Adams2001
回答日時：2001/11/19 09:20

ひとつの要素に二つの背景色を与えることはできません。

ですから、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>

#例では背景画像入れてません。書くの面倒だったので(^_^;)

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
なにせ初心者なので書いてあることはわかっても、いざ自分で画像入れて入力文字位置をいれて～となると、なかなかうまくいかなくて時間がかかってしまいました。
でも、なんとか完成できました。ありがとうございました。

通報する

お礼日時：2001/11/19 21:51

No.2

回答者： starflora
回答日時：2001/11/19 09:34

　　それは、テーブルで可能です。
　　ただ、テーブルだと、左右上下が、４ピクセルだったかデフォルトで開きますから、これを詰めるため、スタイル・シートで、マージンをゼロ・ピクセル指定してください。指定法は、スタイルシートの本に載っていると思います。
　
　　こうして、四隅のマージンをゼロにしたあと、次のスクリプトでテーブルを造ります。

=====================================
　
<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 は、最初から「透過ＧＩＦファイル」でなければなりません。ｈｔｍｌを使っても、ＣＳＳを使っても、ｊａｖａｓｃｒｉｐｔを使っても、画像の背景を透明にすることはできません。（なお、テーブルの幅指定は間違いないですが、高さ指定は、テーブルについての解説を見て、確認してください。二重に指定しているのですが、うまく行かない可能性があります（わたしはスペーサか透明画像をサイズ指定して普通入れます）。
　
　　これは、画像を背景として並べています。（第一の高さ７０ピクセルのセルは、背景の色が青です。第二の高さ１０００ピクセルのセルは、背景が緑です）。
　