4

私はサイトのソースコードをたくさん見てきましたが、これを理解できないようです. 背景、すべての背後にある画像が必要です。ただし、背景全体をその画像にしたくはありません。ある種のバナーのように、一番上に向けて欲しいだけです。いくつかの例はhttp://www.animefreak.tv/とhttp://us.battle.net/wow/en/にあります。現在、テクスチャ付きの背景があります：

body   
{

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ij4KPHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iI2VlZWVlZSI+PC9yZWN0Pgo8ZyBpZD0iYyI+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNlNmU2ZTYiPjwvcmVjdD4KPHJlY3QgeT0iMSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2Q4ZDhkOCI+PC9yZWN0Pgo8L2c+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHg9IjMiIHk9IjMiPjwvdXNlPgo8L3N2Zz4=");

font-size: .80em;

font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;

padding: 0px;

color: #696969;

}

CSS に入れようとする画像は、指定された例のように後ろに表示したいときに、サイトのメイン ページ div の上に表示されます。私は

 <div class = "topb">

 </div>

私のMasterPageの上部にあり、次に使用されます

.topb
{
height: 243px;margin: 0px;padding: 0px;overflow: hidden;
background:  url(/images/test2.jpg) no-repeat top center;
background-image:url(/images/test2.jpg);
}

テストとして私の CSS を使用していますが、明らかに CSS と HTML の開発は初めてです。助言がありますか？

4

1 に答える 1

3

これを行うにはいくつかの方法があります。

CSS3 では、複数の背景画像を使用できます。あなたはこれを行うことができます：

body {
  background-color: #000;
  background-image: url(texture.png), url(banner.png);
  background-position: center center, center top;
  background-repeat: repeat, no-repeat;
}

divまたは、すべてのコンテンツを保持する の直後にラッパーを追加し<body>、それにバナーの背景画像を追加することもできます。

HTML:

<body>
  <div id="Wrapper">
  <!-- The rest of your site's content -->
  </div>
</body>

CSS:

body {
  background: #000 url(texture.png) repeat center center;
}
#Wrapper {
  background: url(banner.png) no-repeat center top;
}

コンテンツがバナーを覆わないように上部にスペースを追加したい場合は、次のようにパディングを追加するだけです。

#Wrapper { padding-top: 240px; }
于 2013-10-10T21:09:04.207 に答える