※ ChatGPTを利用し、要約された質問です(原文:2重に背景画像を)
2重に背景画像を指定して画像の透過に失敗してしまう問題
このQ&Aのポイント
htmlのbackground-imageプロパティとbodyのbackground-colorプロパティを指定しても画像の透過に失敗してしまいます。
背景画像を重ねる方法を試した結果、黄色い部分が透過されず白背景になってしまいました。
サイトに掲載されている方法に従っても解決せず、アドバイスを頂きたいです。
質問をさせていただきます。
画像のようにこれまでは
赤のBのみをbodyに指定して
パターンイメージを並べていました。
そこでその上にAの様な横だけに並べるPNG画像の背景が
欲しいとおもったところこのようなサイトを見つけました。
ttp://www.bnote.net/css/css_layout/tips_html_back.html
このサイト方がおっしゃられている様に
htmlにback-groundでBを指定
bodyにAを指定すれば出来る!
と思ったのですが上手くいきません。
htmlにBを並べるのは成功しました。
しかしbodyにAを指定してはめこむと
pngの黄色い部分が透過されず白背景になってしまいました。
bodyにbackground-color: transparent;を指定したりと
試しましたがなんとも上手くいきません。
何かアドバイス等ございましたらよろしくお願いします!
今は
html {
background-image:url(○○○○○.gif)
}
body {
height : 100%;
text-align:center;
font-size:16px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
line-height: 1.6;
background-color: transparent;
background-image:url(○○○○○.png);
background-position: left top;
background-repeat: repeat-x;
}
となっております。
お礼
ご返信ありがとうございます! 遅れましてすみません。 そんな技があったのですね! ありがとうございます!