CSS课件CSS背景设置

学习目标熟悉Background的常用属性有哪些；掌握background-repeat与background-attachment的使用方法；理解background-size属性之的含义；能够说出background-origin与background-clip的区别与相似处；能够运用CSS设置多张背景图片的页面;能够运用CSS背景属性，设计出丰富多彩的页面。一、CSS2背景常用属性属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|position盐城师范学院信息工程学院一、CSS2背景常用属性属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|position盐城师范学院信息工程学院一、CSS2背景常用属性属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|position盐城师范学院信息工程学院一、CSS2背景常用属性属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|position盐城师范学院信息工程学院一、CSS2背景常用属性属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|position盐城师范学院信息工程学院一、CSS2背景常用属性用backgroung进行设置。CSS背景设置的复合写法选择器{

background:background-color||background-image||

background-repeat||background-attachment||background-position}

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：

transparentnonerepeatscroll0%0%。二、CSS3背景常用属性属性名属性描述background-size规定背景图像的尺寸。background-origin用来控制元素的背景图片position的默认起始点，其默认值为padding-boxbackground-clip用来控制元素的背景图片显示区域，其默认值为border-box盐城师范学院信息工程学院二、CSS3背景常用属性属性名属性描述background-size规定背景图像的尺寸。background-origin用来控制元素的背景图片position的默认起始点，其默认值为padding-boxbackground-clip用来控制元素的背景图片显示区域，其默认值为border-box盐城师范学院信息工程学院二、CSS3背景常用属性属性名属性描述background-size规定背景图像的尺寸。background-origin用来控制元素的背景图片position的默认起始点，其默认值为padding-boxbackground-clip用来控制元素的背景图片显示区域，其默认值为border-box盐城师范学院信息工程学院二、CSS3背景常用属性属性名属性描述background-size规定背景图像的尺寸。background-origin用来控制元素的背景图片position的默认起始点，其默认值为padding-boxbackground-clip用来控制元素的背景图片显示区域，其默认值为border-box盐城师范学院信息工程学院二、CSS3背景常用属性属性名属性描述background-size规定背景图像的尺寸。background-origin用来控制元素的背景图片position的默认起始点，其默认值为padding-boxbackground-clip用来控制元素的背景图片显示区域，其默认值为border-box盐城师范学院信息工程学院二、CSS3背景常用属性background-origin定义的是背景位置（background-position）的起始点；而background-clip是对背景（图片和背景色）的切割。一定注意两个属性的默认值的设置。盐城师范学院信息工程学院二、CSS3背景常用属性注意如果使用联写方式时，background-size需跟在background-position的后面，并用“/”隔着，即“background-position/background-size”；另外强烈建议CSS3中的Background属性不要全部联写，最好把CSS3中的属性拆分出来单独书写，因为它们在不同浏览器下需要加上自己的前缀。盐城师范学院信息工程学院三、用CSS设置多张背景图片CSS3的多背景，就是在同一元素上可以设置除background-color外多个background的其它属性；因为一个元素只具备一个背景色，但自从有了CSS3后，可以让同一个元素同时具有多个背景图像，并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。盐城师范学院信息工程学院三、用CSS设置多张背景图片

语法知识background:url("1.jpg")00no-repeat,url("2.jpg")200px0no-repeat,url("3.jpg")400px201pxno-repeat;也可以这么写：background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-repeat:no-repeat