0

可能重复：
使用 PHP 将 HTML + CSS 转换为 PDF？

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

我试过这个：

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;
  }

问题是对于图像容器，我在顶部、底部、左侧和右侧留下了空白。

我该如何解决这个问题？

4

2 回答 2

2

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

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

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

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

此外，CSScolor与文本颜色有关，而不是与背景颜色有关。你需要使用background-color.

于 2012-11-22T00:45:28.813 回答
1

因为你没有正确定义一半，我会说你的代码除了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%;
}​
于 2012-11-22T00:46:38.287 回答