关于css中的background的一些测试，不知道为什么会这样？

<!--一个页面的根源素是html元素，但是body元素才是内容部分，但是给body设置background-color或者单纯的设置一个background-image的话，却会影响整个页面，即便是body有一个默认的外边距，即便在浏览器中显示的body的高度只有150px;但是它也会渲染整个屏幕。但是如果通过background-position进行定位，同时使用background-repeat禁止重复，那么背景图片就只会影响body这个盒子。-->


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: aqua;
    background-image: url("http://www.w3schools.com/css/img_tree.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-right: 200px;
    border: 3px solid black;
}
p{
	background-color: #fff;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>
</html>

flyingjoer

浏览 1574回答 1

1回答

随时随地看视频慕课网APP