background c3属性

    1. 回顾一下之前学习过的background属性

    1.1 background-color
    1.2 background-image
    1.3 background-repeat
    1.4 background-position
    1.5 background-attchment
    1.6 background
    2. CSS3新增的background属性

    2.1 background-origin
    2.2 多重背景
    2.3 background-size

1.1 背景颜色属性：background-color

颜色的表示方法有3种：单词、rgb表示法、十六进制表示法

1. 单词： 能够用单词来表述的，都是简单颜色

2. rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue 。
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

黑色：（光学显示器，每个元件都不发光，黑色）
background-color: rgb(0,0,0);

   

3. 十六进制表示法

所有用#开头的值，都是16进制的。

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

 

 

1.2 background-image

用于给盒子加上背景图片。背景天生是会被铺满的。

background:url(images/1.jpg);

    1

1.3 background-repeat

设置背景图是否重复的，重复方式的。

    background-repeat:no-repeat; 不重复
    background-repeat:repeat-x; 横向重复
    background-repeat:repeat-y; 纵向重复

1.4 background-position

背景定位属性

background-position:向右移动量 向下移动量

    1

用单词描述：

描述左右的词： left、 center、right
描述上下的词： top 、center、bottom

右下角：background-position: right bottom;

  

1.5 背景图片是否滚动（background-attchment）

    scroll：滚动。默认值
    fixed：固定。不会随着滚动条的滚动而滚动
    local

1.6 background综和属性

background属性和border一样，是一个综合属性：

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

 

可以任意省略部分：

background: red;

  

如果盒子又有背景图片，又有背景颜色。实际上以显示图片为主，富裕的地方，用颜色填充。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

   

2.1 背景图片的基准点（background-origin）

    border-box： 忽略边框，直接从边框的起始0，0点开始平铺
    padding-box：默认值，忽略padding，直接从padding的起始0,0点开始平铺
    content-box：从内容部分开始平铺，会预留出padding的位置。所以说padding会对它造成影响

2.2 多重背景

背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

    1

2.3 控制背景图片的大小（background-size）

background-size:值

取值：

    **长度值**px
    百分比：以盒子宽度为参照
    auto：背景图片的真实大小

    contain：完全显示（当图片的宽度或是高度在缩放的时候有一个“碰到“了盒子的边缘，则停止变化）

    cover：完全铺满（将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器）

当只有一个值，如宽度实现拉伸，高度会默认auto，保持等比例。
当有两个值，宽度和高度会分别拉伸到对应的值，可能会变形。

补充：还有一个很有趣的C3新增背景相关属性

background-repeat:round;