0

HTMLドキュメント全体にグラデーションを付けたいので、BODYタグの中央に別の背景を中央に配置する必要があります。

編集して、どれだけ失敗するかを確認してみてください。

http://xn--wiadomesny-37b.pl/bg

この画像はそれを説明しています：

ここに画像の説明を入力してください

CSSを入力すると失敗します。下に繰り返し表示する必要がある場合でも、背景は1つしか表示されません。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
    background-color: #ffeacd;
    background-image: url(bg.png);
    background-repeat: repeat-x;
}
body {
    background-image: url(bg_overlay.png);
    background-repeat: no-repeat;
    background-position: center;
}
.content {
    width:1020px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
</style>
</head>
<body>
<div class="content">
  <p>This content is closed in 1020px wide DIV, as to merge in most displays. </p>
  <p>Rest around is an background seen or unseen depends on users screen size. </p>
  <p>Me got 24'' so its obvious that I will see all backgrounds and even gradients as 
    blank space fillers</p>
  <p>
  <h1>See how much it fails in various browsers:</h1>
  <ul>
    <li><a href="chrome.png">Chrome</a></li>
    <li><a href="ff.png">Firefox</a></li>
    <li><a href="ie.png">IE</a></li>
  </ul>
  </p>
  )</div>
</body>
</html>
4

4 に答える 4

3

2 つの背景が表示されない場合は、body要素が と同じ領域を占めている可能性がありhtmlます。

以下は、要素が異なる背景を持つことができることを示しています ( http://jsfiddle.net/ZVHqs/ ):

<!doctype html>
<style>
html { background: green; }
body { background: yellow; margin: 1em; }
</style>
Hello world
于 2012-05-07T10:21:15.743 に答える
1

私はこれがあなたを助けるべきだと思います：

html {
           background: #ffeacd url(bg.png) 0 0 repeat-x;
           width:100%;
           height:100%;
     }
body {
           background:transparent url(bg_overlay.png) center center no-repeat;
           width:100%;
           height:100%;
     }
.content {
           width:1020px;
           padding: 0px;
           margin-top: 0px;
           margin-right: auto;
           margin-bottom: 0px;
           margin-left: auto;
         }
于 2012-05-07T11:26:12.867 に答える
0

あなたはこれをやってみる必要があります、

body{
    background-position: fixed;
}
于 2012-05-07T10:13:13.683 に答える
0

2 つの DIV を使用する必要があります。1 つは左側のサイド バー用で、もう 1 つはメイン コンテンツ用です。BODY の背景をグラデーションに設定し、左側のバーの DIV を好きなように設定します。

次に、div の 2 列レイアウトの作成に集中する必要があります。これは、CSS の配置に関する優れた入門書です。

于 2012-05-07T10:14:56.613 に答える