0

重複の可能性：
PHPでHTML + CSSをPDFに変換しますか？

これを適切に達成する方法を見つけることができないようです。私は2つのコンテナを持っています。1つのコンテナで、上半分全体を水平方向に引き継ぐ背景画像を使用し、次に2番目のコンテナを使用して赤に色付けします。これにより、下半分が水平方向に引き継がれます。

私はこれを試しました：

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

パディングとマージンを0に設定する必要があります。ほとんどの経験豊富なUI開発者は、CSSリセットと呼ばれるものを使用して、ブラウザー固有のデフォルトのスタイルシートの動作（パディングの付与など）を排除します。

あなたの目的のために：基本的な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 に答える