第4章 CSS3背景-1
CSS3背景
4.1 CSS3背景属性简介
background是一个使用率很高的属性，也是一个十分有用的属性，能帮助设计师实现一些特殊的效果，使用起来也非常简单。
4.1.1 背景的基本属性
背景主要包括五个属性：
-
background-color（背景颜色） -
background-image（背景图片） -
background-repeat（背景图片展示方式） -
background-attachment（背景图片是固定还是滚动） -
background-position（背景图片位置）
可以单独写，也可以将这些属性串在一起使用。
barckground : <background-color> [,<background-image>] [,<background-repeat>] [,<background-attachment>] [,<background-position>]
1、background-color 属性
background-color : transparent || <color>
用来设置元素的背景颜色，其默认值为“transparent，不设置任何颜色情况下是透明色，<color>用来设计背景色彩，常用的颜色格式如下：
- 颜色命：如 “red”
- rgb色：如 rgb(255, 0, 0) 或 rgb(100% 0%, 0%)
- hls值：如 hsl(0,100%, 50%)
- 十六进制值：如 #ff0000
在css3中还是可以使用rgba色。
2、background-image 属性
background-image : none || <url>
用来设置元素的背景图片，默认值为“none”，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。
3、background-repeat 属性
background-repeat : repeat || repeat-x || repeat-y || no-repeat
用来设置元素的背景图片在元素的盒模型中的铺放格式，其默认值为“repeat”，也就是背景图片沿元素的X轴和Y轴同时平铺，“repeat-x”表示的是元素背景图片沿元素的X轴平铺，Y轴不进行任何铺放；“repeat-y”刚好相反，元素背景图片沿元素的Y轴平铺，X轴不进行任何铺放；“no-repeat”和默认值“repeat”相反，表示背景图片不做任何铺放。
4、background-attachment 属性
background-attachment : scroll || fixed
用来设置元素背景图片是否固定或者随着页面的其余部分滚动，其默认值为“scroll”，表示背景图片会随着浏览器滚动条一起滚动，而取值为“fixed”时，背景图片固定不动（取值为“fixed”时，一般用在html 或 body上，使用在其他标签上不能达到固定效果）。
5、background-position 属性
background-position : <percentage> || <length> || <left|center|right> [,top|center|bottom]
background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left,center,top,right,top,bottom配合设置，而其中以下几种表示相同定位方式：
- "top left","left top"和"0% 0%","0,0"代表元素的左上角；
- "top","top center","center top"和"50% 0"表示在元素顶边居中位置；
- "right top","top right"和"100% 0"代元素的是元素的右上角位置；
- "left","left center","center left"和"0% 50%"表示在元素左边中间位置；
- "center","center center"和"50% 50%"表示在元素中间位置；
- "right","right center","center,right"和"100% 50%"表示在元素右边中间位置；
- "bottom left","left bottom"和"0% 100%"表示在元素的左下角；
- "bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；
- "bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-position 演示效果</title>
<style>
*{margin: 0;padding: 0;}
body{padding: 100px;}
ul{list-style: none;}
li{width: 200px;height: 200px;float: left;margin: 20px;
background-color: orange;
background-image: url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg);
background-repeat: no-repeat;
}
.no1{background-position: left top;}
.no2{background-position: top center;}
.no3{background-position: right top;}
.no4{background-position: left center;}
.no5{background-position: center;}
.no6{background-position: right center;}
.no7{background-position: bottom left;}
.no8{background-position: bottom center;}
.no9{background-position: bottom right;}
</style>
</head>
<body>
<ul>
<li class="no1"></li>
<li class="no2"></li>
<li class="no3"></li>
<li class="no4"></li>
<li class="no5"></li>
<li class="no6"></li>
<li class="no7"></li>
<li class="no8"></li>
<li class="no9"></li>
</ul>
</body>
</html>
background-position 演示效果
4.1.2 与背景相关的新增属性
在CSS3中，background属性依然保持以前的用法，只是追加了一些与背景相关的属性。
-
background-origin：指定绘制背景图片的起点 -
background-clip：指定背景图片的显示范围 -
background-size：指定背景图片的尺寸大小 -
background-break：指定内联元素的背景图片进行平铺时的循环方式
