前端（四）：CSS-背景

css引入方法

1、外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
div{ width:100px; height:100px; color:red }
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">这是一个div</div>

设置背景

background-color 设置背景色。

p {background-color: red;}

			/* css颜色表示的三种方式：
			 1、英文名
			 2、RGB表示法:rgb(130, 222, 130);
				RGBA:rgba(11,222,33,0.5);
			 3、16进制表示法 
			 */
			/* background: red; */
			/* background: rgb(130, 222, 130); */
			/* background: rgba(11, 222, 33, 0.5); */
			/* background: #59d537; */

背景图片

body {background-image: url(/i/eg_bg_04.gif);}

			/* 默认平铺（好几张图片，不改变大小，填满元素） */
			background-image: url(image/07.png);
			/* 默认平铺 */
			/* background-repeat: repeat; */
			/* X平铺 */
			/* background-repeat: repeat-x; */
			/* y轴平铺 */
			/* background-repeat: repeat-y; */
			/* 不平铺 */
			background-repeat: no-repeat;

			/* 背景图定位
			 */
			/* background-position: center bottom; */
			/* background-position: 100px 20px; */
			/* background-position: 10% 5%; */
			
			/* 背景图的大小 */
			/* 像素值设置 */
			/* background-size: 500px 500px; */
			/* 容器百分百设置 */
			/* background-size:50% 20%; */
			/* 原始尺寸 */
			/* background: auto; */
			/* 填满容器 */
			/* background-size: cover; */