<!--一個頁面的根源素是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>
關于css中的background的一些測試,不知道為什么會這樣?
flyingjoer
2015-12-20 10:19:38