0

私はこれを解決しようとしてきましたが、今のところ完全に失われています。ページ上部の画像のサイズ変更に関連する多くのことを試し、背景を拡張バージョンとして設定できると結論付けました。text-align:center（メイン画像が小さいため）を使用して、メイン画像を独自のサイズに維持します。

ボタンを追加するには、その画像の上にテキストを表示する必要があることに気付くまで、これは完全に正常に機能していましたが、これを実行しようとすると、画像が下に押し出されます。これは、現在の私のサイトの例です。これは私のウェブサイトのように見えます。このメイン画像に邪魔をせずにテキストオーバーレイを適用できる方法を見つけようとしています。

使用していないmargin-left / margin-right、またはposition:absoluteブラウザのサイズを変更したときにメイン画像のサイズ変更が適切に適用されないためです。どんな助けでも大歓迎です

（私はまだ始めているので、私のHTMLは見栄えがよくありません）

  <style type="text/css">
 body {
 background-image:url('images/Website Banner Number 2.png');
 background-color:#000000;
 background-repeat:no-repeat;
 margin: 0;
 padding: 0;
 }
  </style>

</head>
<body>
<div style="z-index:10">
<div style="text-align:center">
 <img src="images/Website Banner.png" />
</div>
</div>
<div style="z-index:9">
<div style="width:925px" id="container">
 <div id="header" style="background-color:#333333">
  <h3 style="margin-bottom:0;"> <span style="color:#FFFFFF"> &#187;</span><span  
style="color:#0000CC" class="words">[Welcome] </span><span style="color:#FFFFFF"     
  class="words">to Han's tech class site</span> </h3>
 </div>
4

2 に答える 2

0

代わりに画像の領域をリンクとして使用することになり、単語を画像に直接追加し、これをコードに追加しました

    <div style="text-align:center">
 <img src="images/Website Banner.png" alt="Han's Class" usemap="hans" />
 <map name="hans">
 <area shape="rect" color="#FFFFFF" coords="7,371,90,395" href="index.html" alt="Home">
 <area shape="rect" color="#FFFFFF" coords="117,371,200,395" href="general.html" alt="Information">
 <area shape="rect" color="#FFFFFF" coords="227,373,310,395" href="info.html" alt="General">
 <area shape="rect" color="#FFFFFF" coords="336,373,422,395" href="faq.html" alt="Frequently Asked Questions">
 <area shape="rect" color="#FFFFFF" coords="446,372,532,395" href="rules.html" alt="Rules">
 <area shape="rect" color="#FFFFFF" coords="559,372,645,395" href="forum.html" alt="Forums">
 </map>
</div>

これを行う別の方法があることを望んでいたので、ボタンの上にカーソルを置いたときにボタンを点灯させることができましたが、これは良い代替手段として機能すると思います。良い方法を知っていたら教えてください！

于 2013-02-26T15:35:16.173 に答える
0

このリンクを見てください。これはあなたが探しているものですか？

ウィンドウの幅に応じて背景画像を調整しますか?

background:url("http://www.testinghtml.tk/images/Website Banner Number 2.png") no-repeat scroll center top / cover transparent;

さらに、必要に応じて div の高さを調整できるため、body ではなく別の div (bodyWrapper)に背景を追加することをお勧めします。

于 2013-02-26T05:00:07.340 に答える