※ ChatGPTを利用し、要約された質問です(原文:影付き(透過)ロゴタイトルの表示ないし背景との同調について)
影付き(透過)ロゴタイトルの表示ないし背景との同調について
このQ&Aのポイント
HP作成中の背景とタイトルロゴの同調について、影付きのロゴを透過保存する方法やボーダー画像を使って背景と溶け込ませる方法などを解説してください。
CSSを使って背景とタイトルロゴを同調させる方法や、gifで透過画像を作成する方法についても教えてください。
また、png保存を利用する際の表示の問題についても解説していただけると助かります。
影付き(透過)ロゴタイトルの表示ないし背景との同調について
影付き(透過)ロゴタイトルの表示ないし背景との同調について
只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。
そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。
ちなみにそのタイトルを表示させる部分は
#wrapper{
margin:0px;
padding: 0px;
text-align: center;
}
#contents{
width: 880px;
margin-left:auto;
margin-right:auto;
}
で内包してあります。html上で簡単に書くと
・
・
・
<body>
<div id="wrapper">
<div id="contents">
ここに画像タグ
</div>
</div>
</body>
といった感じです。
背景は横一列で固定するようにしています。
body{
font-size: 13px;
line-height:160%;
background-image: url(img/back.gif);
background-repeat:repeat-x;
background-position: 0% 0%;
}
こんな感じです。
CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。