目录
1.CSS的颜色表达
1.1前景色color
1.2背景色background-color
2.背景
2.1 background-image:url()设置背景图;
2.2 background-repeat属性设置是否及如何重复背景图像
2.2.1 background-repeat: no-repeat设置背景图不重复
2.2.2 background-repeat: space / repeat-x的区别
2.3background-position属性设置背景图像的起始位置
2.3.1 background-position:center图片居中
2.3.2 background-position: 20px 80px;控制图片距离字的水平距离和垂直距离
2.4 background-size 属性规定背景图像的尺寸
2.5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
2.6background-origin属性：相对于内容框来定位背景图像
2.7background-clip属性指定背景绘制区域
1.CSS的颜色表达
RGB：0~255（调色板）
RGBA：a表示透明度，如：color: rgba(77, 170, 136, 0.5);
1.1前景色color
例：hover{}作用：鼠标放上面会变色
<!DOCTYPE html><html><head><meta charset="utf-8"><title>前景色</title><style type="text/css">h1{color: tomato;}h1:hover{ /*鼠标放在h1上会变色*/color: rgba(77, 170, 136, 0.5); /*RGBA：a表示透明度*/}p{color:rgb(113, 155, 170); }</style></head><body><h1>《蜀道难》</h1><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p></body></html>
1.2背景色background-color
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景色</title></head><body><!--单独设置每一段文本的背景色--><p style="background-color: #9dbfd5;">你好</p><p style="background-color: #bcd2a3;">兄弟</p><p style="background-color: #b0b6d7;">你好</p><p style="background-color: #ddc4d9;">集美</p></body></html>
2.背景
2.1 background-image:url()设置背景图;
注：padding: 150px 100px 50px 200px;
上边距150px，右边距100px，下边距50px，左边距200px。
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>前景色</title><style type="text/css">/*为body元素指定背景图*/body{background-image:url(tu3.jpg);padding: 150px 100px 50px 200px; /*上边距150px，右边距100px，下边距50px，左边距200px。*/}</style></head><body><h1>《蜀道难》</h1><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p></body></html>
注：背景图和背景色同时设置，显示背景图。背景图覆盖背景色。
<style type="text/css">
body{
background-color: pink;
background-image:url(tu3.jpg);
padding: 150px 100px 50px 200px;
}
</style>
2.2 background-repeat属性设置是否及如何重复背景图像
语法：background-repeat:repeat / space / repeat-x / repeat-y / no-repeat / inherit;
2.2.1 background-repeat: no-repeat设置背景图不重复
例子：background-repeat: no-repeat
<!DOCTYPE html><html><head><meta charset="utf-8"><title>前景色</title><style type="text/css">body{background-image:url(tu4.jpg);background-repeat: no-repeat; /*设置背景图不重复*/padding: 150px 100px 50px 200px;}</style></head><body><h1>《蜀道难》</h1><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p></body></html>
结果：图1是没设置background-repeat: no-repeat，图2设置background-repeat: no-repeat。
图1：
图2：
2.2.2 background-repeat: space / repeat-x的区别
repeat-x：图像将在水平方向重复。
space：水平或者垂直重复图像，当背景图片不能以整数次平铺时，会用空白间隙均匀填充在图片周围，图片不缩放。
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>重复背景图片</title><style type="text/css">/*将页面背景覆盖满小猪*/body{background-image: url('tu西瓜.jpg');background-repeat: space; /*background-repeat:repeat-x;*/}</style></head><body><p>西瓜超好吃~</p><p>西瓜超好吃~</p></body></html>
图1是background-repeat:repeat-x;图2是background-repeat: space;
图1：
图2：
2.3background-position属性设置背景图像的起始位置
2.3.1 background-position:center图片居中
例子：background-position:center;
<html><head><style type="text/css">body{ background-image:url('tu4.jpg');background-repeat:no-repeat;background-attachment:fixed;/*把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。*/background-position:center; /*背景位置*/</style></head><body><p style="font-size:30px">30px字体效果</p><font size="10"> 10号字体效果</font></body></html>
2.3.2 background-position: 20px 80px;控制图片距离字的水平距离和垂直距离
如图所示背景图会遮挡文字，可以设置图片的位置，使其不会遮挡文字。
例子：background-position: 20px 80px;
<!DOCTYPE html><html><head><meta charset="utf-8"><title>重复背景图片</title><style type="text/css">/*将页面背景覆盖满小猪*/body{background-image: url('tu西瓜.jpg');background-repeat: space;background-position: 20px 80px;}</style></head><body><p>西瓜超好吃~</p><p>西瓜超好吃~</p></body></html>
background-position: 20px 80px；
background-position: 100px 80px;
background-position:20px 150px;
2.4 background-size 属性规定背景图像的尺寸
语法：background-size: length|percentage|cover|contain;
例子：background-size: 15%;调整背景图片大小
<!DOCTYPE html><html><head><meta charset="utf-8"><title>调整图片尺寸</title><style type="text/css">body{background-image: url(tu3.jpg);background-repeat: no-repeat;background-position: 10px 50px;background-size: 15%;}</style></head><body><p style="font-size:50px">好好学习！</p></body></html>
调整前：
调整后：
2.5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
语法：background-attachment:scroll || fixed || inherit || local;
例子：background-attachment: local;背景图随元素框变大而变大
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置图片的附着方式</title><style type="text/css">textarea{background-image: url(tu3.jpg);background-repeat: no-repeat;background-size: 50%;background-attachment: local;}</style></head><body><textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa quos nisi voluptate magnam porro magni numquam eius vitae in placeat laudantium saepe distinctio tenetur cum doloremque molestias ad esse! </textarea></body></html>
2.6background-origin属性：相对于内容框来定位背景图像
background-origin 属性规定 background-position 属性相对于什么位置来定位
语法：background-origin: padding-box|border-box|content-box;
例子：对比三个属性的结果区别
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置图片起始位置和显示区域</title><style type="text/css">div{border: 25px dotted #c2f4bd;padding: 100px;background-image: url(tu西瓜.jpg);background-repeat: no-repeat;background-size: 50px 50px;background-origin: border-box;}</style></head><body><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quod voluptatum nisi voluptates reprehenderit ad beatae perspiciatis nesciunt nihil laborum obcaecati aliquid dignissimos illo ut eius esse repellendus aliquam iste!</div></body></html>
①background-origin: padding-box;西瓜图片从内边距左上角开始
②background-origin:content-box; 西瓜图片从内容区域左上角开始。
③background-origin: border-box; 西瓜从边框左上角开始
2.7background-clip属性指定背景绘制区域
语法：background-clip: border-box|padding-box|content-box;
例子：三者差别
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鱼C-零基础入门学习Web（Html5+Css3）</title><style>#example1 {border: 10px solid black;padding:33px; /*内边距*/background: lavender;}#example2 {border: 10px solid black;padding:33px;background: pink;background-clip: padding-box;}#example3 {border: 10px solid black;padding:33px;background: lightblue;background-clip: content-box;}</style></head><body><p>未设置 background-clip :</p><div id="example1"><h2>好好学习</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><p>background-clip: padding-box:</p><div id="example2"><h2>好好学习</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><p>background-clip: content-box:</p><div id="example3"><h2>好好学习</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div></body></html>
注：如何整合背景设置
body {background-color:gray;background-image: url('tu.jpg'); background-repeat:no-repeat;padding: 80px 0px 50px 360px;}
以上可变成：
body {background:gray url('tu.jpg') no-repeat;padding: 80px 0px 50px 360px;}
