Question

我的页面有以下样式：

    <style>
        html, body {
            margin: 0;
            padding: 0
        }
        body {
            background-color: rgb(5, 77, 179);
            text-align: center
        }   
        .contentarea {
            background-image: url('path-to-this-image.png')
        }
        .class {
            background-image: url('path-to-another-image.png')
        }

    </style>

正文中有两个DIV标记：

<body>
    <div class="contentarea">
    </div>
    <div class="class">
    </div>
</body>

当我尝试加载页面时，只显示蓝色背景。为什么是这样？我正在使用Chrome＆gt; V.25。

Answer 1

<强> CSS：

    .contentarea {
        background-image: url('path-to-this-image.png');
        height: Height of image in px; // or 100%
    }
    .class {
        background-image: url('path-to-another-image.png');
        height: Height of image in px; // or100%
    }

如果div内没有文字，你必须给出高度。另外，不要忘记在css属性

的末尾添加分号;

Answer 2

添加到上一个：使其使用100％set element属性作为“display：block;”。它应该工作。所以你的css看起来像这样：

 body{
    background-color: rgb(5, 77, 179);
    text-align: center
  }
 .contentarea {
    background-image: url('path-to-this-image.png');
    width:100%; /*or whatever*/
    min-height:80%;   /*or whatever*/ 
    display:block;
  }
  .class {
      background-image: url('path-to-another-image.png');
      width:100%; /*or whatever*/
      min-height:80%;   /*or whatever*/ 
      display:block;
  }

在BODY中渲染DIV的背景图像

2 个答案: