第四章 CSS3背景

前言：background是CSS使用频率很高的一个属性，可以帮助web设计师实现一些特别的效果，但有时候CSS提供的background功能远远无法满足设计的需求。基于这种情形之下，为了方便设计师更灵活的设计需要的网页效果，在原有的background基础上新增了一些功能属性，可以在同一个元素内叠加多个背景，也允许设计师改变背景图片的大小尺寸，设计师还可以知己制定背景显示的范围以及指定绘制背景图像的绘制起点等。

4.1CSS3背景属性简介

background是一个使用率很高的属性吗，也是一个十分有用的属性，可以帮助设计师实现一些特殊效果，使用起来也非常简单。

4.1.1背景的基本属性

background-color(背景颜色)

background-image(背景图片)

background-repeat(背景图片展示方法)

background-attachmen(背景图片是固定还是滚动)

background-position(背景图片位置)

可以单独写也可以将这些属性串在一起使用

1.background-color属性

语法：

background-color：transparent || <color>

用来设置元素的背景颜色，其默认值为“transparent”，不设置任何颜色情况下是透明色，<color>用来设计背景颜色，常用的颜色格式如下：

颜色名：red、blue

rgb:rgb(255,155,255) 或rgb（100%，0%，0%）

十六进制值：如#ff0000。

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轴平铺，“repeat-y”表示背景图片沿y轴平铺。no-repeat表示背景图片不做任何平铺。

4.background-attachment属性

语法：background-attachment：scroll || fixed

用来设置元素背景图片是否固定或者随着页面其余部分滚动，其默认值为“scroll”,表示背景图片会随着浏览器滚动一起滚动，而取之为“fixed”时，背景图片固定不动。

5.background-position属性

语法：background-position：<percntage> || <length> || [left | center | right],[top| center | bottom]

用来设置用来设置元素背景图片的位置，其默认值为（0,0）|| （0%，0%）|| （left，top），其值可以是具体的百分数或数值设置（可以是负数），也可以使用left、right、top、bottom配合设置。

4.1.2 背景的新增属性

在CSS3中背景属性依然保持了以前的用法，知识追加了一些与背景相关的属性。

background-orgin:绘制背景图片的起点。

background-clip:指定背景图片的显示范围。

background-size：指定背景图片的尺寸大小。

background-break：指定内联元素的北京那个图片进行平铺时的循环方式。

4.2CSS3背景原点属性

4.2.1

background-origin属性主要决定background-position属性总是以元素左上角为坐标原点对背景图片进行背景定位。CSS3的background-origin属性将打破这一格局，可以根据自己的需求来改变背景图片的background-position起始位置。先来学习其基本语法。