在BODY中渲染DIV的背景图像

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> 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％一起将元素属性设置为“ 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 个解决方案

解决方案1
0 已采纳 2013-11-30 19:43:43

解决方案2
0 2013-11-30 20:53:54

在BODY中渲染DIV的背景图像

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-11-30 19:43:43

解决方案2 0 2013-11-30 20:53:54

解决方案1
0 已采纳 2013-11-30 19:43:43

解决方案2
0 2013-11-30 20:53:54