网页设计与制作（活页式） 课件 情景8-5 背景属性

网页设计与制作CSS背景属性授课教师：吴纪磊HTMLcsscssJavaScript目录CONTENTS12学习目标知识讲解学习目标01学习目标学习目标01理解CSS的背景属性学习目标02掌握CSS的背景属性的设置02知识点讲解学习导航

网页能通过背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果。

所以在网页设计中，控制背景颜色和背景图像是一个很重要的步骤。1、CSS背景属性

首先，我们来看一下CSS相关的背景属性：background-color:css设置背景颜色。background-position:css设置背景图像的位置。background-attachment:背景图像是否固定或者随着页面的其余部分滚动。background:简写属性，作用是将背景属性设置在一个声明中。background-repeat:css设置背景图片是否重复及如何重复。background-image:css设置图片背景。1、CSS背景属性

CSS的背景属性主要用于设置对象背景颜色或背景图片以及背景图片的拉伸方向及其位置等样式。常用的背景属性如表下所示：属性描述background综合属性，在一条声明中设置所有背景属性的简写属性。background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。background-clip规定背景的绘制区域。background-color设置元素的背景色。background-image设置元素的背景图像。background-origin规定在何处放置背景图像。background-position设置背景图像的开始位置。background-repeat设置背景图像是否及如何重复。background-size规定背景图像的尺寸。1、CSS背景属性CSS中，颜色值通常以下方式定义:background-color0101十六进制-如：#ff0000。02RGB-如：rgb(255,0,0)。03颜色名称-如：red。04默认–transparent，透明之意，如果一个元素没有指定背景色，那么背景就是透明的。05inherit从父元素继承背景颜色，这个在IE上存在兼容问题。1、CSS背景属性background-color01接下来通过案例演示元素背景颜色的设置方法，具体CSS代码如下：h2{ font-family:"微软雅黑"; color:#FFF;background-color:#F00;/*设置标题的背景颜色*/}1、CSS背景属性默认地，背景图片位于元素的左上角，并在水平和垂直方向上重复。body{background-image:url('paper.gif');}background-image02提示：背景颜色和背景图片是可以共存的。请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。body{background-image:url('paper.gif');background-color:#fff;}1、CSS背景属性如果需要对背景普片平铺，可以使用background-repeat属性。具体使用方法如下：body{background-image:url('gradient2.png');background-repeat:repeat-x;}background-repeat03repeat：沿水平和竖直两个方向平铺（默认值）；no-repeat：不平铺（图像位于元素的左上角，只显示一次）；repeat-x：只沿水平方向平铺；repeat-y：只沿竖直方向平铺。例如：1、CSS背景属性background-position属性用来控制背景图片的位置。一般配合background-repeat:no-repeat;使用。body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:righttop;}background-position04为background-position属性提供值有很多方法。可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，还可以使用长度值，如100px，还可以使用百分数值。1、CSS背景属性在网页上设置背景图像时，随着页面滚动条的移动，背景图像也会跟着一起移动。如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用background-attachment属性来设置。其属性值如下：background-attachment05scroll：图像随页面元素一起滚动（默认值）。fixed：图像固定在屏幕上，不随页面元素滚动。body{background-image:url('image.png');background-repeat:no-repeat;background-attachment:fixed;}1、CSS背景属性background属性在一个声明中设置所有背景属性。在CSS中是一个复合属性。background06通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。需要注意的是，各个样式顺序任意，中间空格隔开，不需要样式可以省略。但在实际的工作中，通常按照背景色、图像、平铺、定位、固定。body{background:#00FF00url('bgimage.gif')no-repeatfixe