01_04.background属性

最新推荐文章于 2021-02-23 01:16:32 发布

原创最新推荐文章于 2021-02-23 01:16:32 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

XHTML+CSS 专栏收录该内容

42 篇文章

订阅专栏

本文深入探讨CSS背景属性的使用方法，包括默认背景、水平重复、垂直重复、不重复等样式，以及背景位置的精确控制。通过实例展示如何灵活运用这些属性实现网页布局与美化。

<!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;
}