02-CSS实践-背景控制

主要用户定义显示控制元素的背景
常用的定义：
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景是否重复
  - repeat-x 水平方向横向重复
  - repeat-y 竖向 y轴
  - no-repeat 禁止平铺
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的位置。
  - right
  - top
  - left
  - buttom

背景颜色

颜色的表示方式

rgb 模式：红色绿色蓝色，rgb取值范围（0-255）
颜色的英文名称： blue
十六进制 #9f0000 （最常用）
rgba(红色，绿，蓝，透明度) a的取值范围0-1 0表示完全透明 1 表示不透明

实验代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>background-color</title>
		<style>
			#warp {
				width: 500px;
				height: 500px;
				/*background-color: #00FFFF;*/
				/*background-color: black;*/
				/*background-color: rgb(255,100,255);*/
				background-color: rgba(255,100,255,1);
        /*background-color: hsla(30,10%,70%,1);*/
			}
			
			
		</style>
	</head>
	<body>
		<div id="warp">
			Hello World!
		</div>
		
	</body>
</html>

实验效果：

images

背景图片

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

实验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#warp {
				width: 1000px;
				height: 800px;
				background-image: url(images/03.png);
				/*background-repeat: no-repeat;*/
				background-repeat: no-repeat;
				/*background-attachment: fixed;*/
				background-color: #00FFFF;
				background-position: left top;
			}
		</style>
	</head>
	<body>
		
		<div id="warp">
			Hello World!
		</div>
	</body>
</html>