http://runjs.cn/code/p2tvxwsj
代码如下:
为什么 body 的 background 位置不在 border之内
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url('http://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-size:100% 100%;
background-repeat:no-repeat;
width:300px;
height:60px;
border:solid;
}
</style></head>
<body>
</body>
</html>
PHP中文网2017-04-17 14:56:09
HTML タグの中で本文の背景が最も特殊で、他のタグの背景の計算方法が異なるためです。
おそらく W3C は開発時に意図的に本文をより複雑に設計したのでしょう。全体的な状況をガイドするために、ブラウザと HTML 言語を使用します。私の提案は、将来問題が発生したときにバグの原因を見つけないようにするために、これらの特別な場所を覚えておくことです。
要約すると、この問題の背景には 2 つの奇妙な場所があります。 body:
1. 本文に赤色の背景色を指定すると、全画面幅と全画面高さが赤色で覆われていることがわかります。
2. 本文に margin:50px auto を設定します。 ; 中央揃え後、背景色と背景画像はすべて最下点から左端までの幅が 100%、背景色の高さも 100% であることがわかります。コードに基づいて変更を加えました。
http://runjs.cn/code/jwwcoan0< /p> を見てください。
PHP中文网2017-04-17 14:56:09
確かに、私はこれまでにそのような問題に遭遇したことがありません!
試してみてください!
html の背景画像の値が none (デフォルト値: none) で、background-color 値が透明 (デフォルト値: 透明) の場合、ブラウザはこれら 2 つの属性値を借用します。本文から html を変更して、background-image または background-color プロパティを設定します。
<style type="text/css">
html{
背景色: 透明;
}
体{
幅: calc(100% - 100px);
高さ: 300ピクセル;
背景色: 赤;
マージン: 50px;
}
</style>たとえば、上記のコードに何も変更を加えなかった場合、結果は次のようになります。
< /p>
HTML のbackground-color 属性値を #fafafa などの有効な値に変更すると、次のような効果が得られます。
< /p>
これがお役に立てば幸いです!