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>