Question

可能重复：
Convert HTML + CSS to PDF with PHP?

我似乎无法找到妥善完成此任务的方法。我有两个容器。在一个容器中，我想使用一个背景图像，它将水平占据整个上半部分，然后我想使用第二个容器并将其着色为红色。这将水平接管下半部分。

我试过了：

HTML：

 <div class="container1">
     Some text and other divs go here. This is where the background will be an image.  
 </div>
 <div class="container2">
     Some text will also here along with divs. This is where I want to use the red background.
 </div>

CSS：

 .container1 {
      background-image: url('img.png');
      width:100%;
  }
  .container2 {
      width: 100%;
      color: #990000;
  }

问题是对于图像容器，我的顶部留有空白，底部，左侧和右侧。

我该如何解决这个问题？

Answer 1

您需要将填充和边距设置为0.大多数有经验的UI开发人员将使用所谓的CSS重置，以消除任何特定于浏览器的默认样式表行为（例如提供填充。

为了您的目的，基本的CSS重置：

body { padding: 0px; margin: 0px;}
div { padding: 0px; margin: 0px; }

在CSS文件的开头，应该有帮助。

此外，CSS color与文本颜色有关，而与背景颜色无关。您需要使用background-color。

Answer 2

由于您没有正确定义一半，我会说您的代码没问题，color应该是background-color;看到它在这里正常工作http://jsfiddle.net/TkBxH/

如果你的意思是屏幕的一半，那么你需要使用绝对定位，CSS将是

.container1, .container2 {
    position: absolute;
    left:0;
    right:0;
    height:400px; /* based on screen size */
}
.container1 {
    top: 0;
}
.container2 {
    bottom: 0;
}

编辑：如果您不介意<body>（.container1, .container2的父级）的绝对定位，您可以避免使用px值

body { /* Force <body> to fill screen */
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.container1, .container2 {
    height:50%;
}

如何创建两个不同背景的容器？

2 个答案: