01_04.background屬性

原創

2020-02-22 04:29

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style/01_05_background.css">
	</head>
	<body id="bg">
		1.默認背景
		<div id="moren"></div>
		2.默認背景水平重複
		<div id="chongfu_shuiping"></div>
		3.默認背景垂直重複
		<div id="chongfu_chuizhi"></div>
		4.默認背景不重複
		<div id="chongfu_buchongfu"></div>
		<hr />
		<p>（tip：如果水平、垂直任意一項規定了值，另一項爲居中）</p>
		<hr />
		5.默認背景水平方向居左，垂直居下
		<div id="weizhi_shuiping_zuo_chuizhi_xia"></div>
		6.默認背景垂直方向居上，水平居右
		<div id="weizhi_chuizhi_shang_shuiping_you"></div>
		7.縮寫
		<div id="suoxie"></div>
	</body>
</html>

#bg{

	background: url(../images/01_05_background_body.jpg) top no-repeat #B0D76C fixed;
}
#moren{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
}
#chongfu_shuiping{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
	background-repeat: repeat-x;
}
#chongfu_chuizhi{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
	background-repeat: repeat-y;
}
#chongfu_buchongfu{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
	background-repeat: no-repeat;
}
#weizhi_shuiping_zuo_chuizhi_xia{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
	background-repeat: no-repeat;
	background-position: left bottom;	

}
#weizhi_chuizhi_shang_shuiping_you{
	width: 200px;
	height:200px;
	background-color:green;
	background-image: url(../images/01_05_background.png);
	background-repeat: no-repeat;
	background-position:  top right;
}
#suoxie{
	width: 200px;
	height:200px;
	background: red url(../images/01_05_background.png) no-repeat center;
}