课程主题使用字体文本背景属性美化页面网页客户端技术课程.pptx

;使用字体、文本、背景属性美化页面目录;背景属性（background）;设置背景颜色－background-color

可以使用background-color属性为元素设置背景颜色。

基本语法：background-color:color|transparent

语法说明：

color为颜色表示的三种形式，颜色名称、十六进制值或rgb()函数；

transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

;设置背景颜色－background-color

例如，以下代码给段落设置了灰色的背景颜色，为了将背景颜色从文本向外有所延伸，设置了一个内边距。

p{background-color:gray;padding:20px;}

可以为所有HTML标签设置背景色，其默认值是transparent。另外，所有背景属性都不能继承。;;;设置重复背景图像－background-repeat

background-repeat属性设置网页的背景图像是否在水平或垂直方向平铺。

基本语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat

语法说明：

background-repeat属性的取值说明如右表所示。;设置重复背景图像－background-repeat

例如，以下代码为网页设置了一个背景图像，垂直平铺。

body{background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;}

;插入背景附件－background-attachment

背景附件属性background-attachment是用来设置背景图像是否随着滚动条的移动而一起移动。

基本语法：background-attachment：scroll|fixed

语法说明：

scroll表示背景图像是随着滚动条的移动而移动，是默认值；

fixed表示背景图像固定在页面上不动，不随着滚动条的移动而移动。

例如，以下代码表示背景图像不平铺，不随滚动条的移动而移动。

body{background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed;};设置背景图像位置－background-position

设置网页的背景图像时，如果设置不重复，图像将从网页左上角开始显示。通过background-position属性可以设置背景图像在网页中的位置。

基本语法：background-position：百分比|长度|关键字

语法说明：

使用百分比和长度设置图像的位置时，要指定2个空格隔开的值，表示水平和垂直位置。水平位置的参考点是网页的左边，垂直位置的参考点在网页的上边；

关键字在水平???向主要有：left、center、right，表示居左、中、右。在垂直方向的主要有：top、center、bottom，表示居顶、中、底端。水平方向和垂直方向的关键字可以搭配使用。;;设置所有的背景属性－background

background简写属性可以在一个声明中设置所有的背景属性。可以设置如下属性：

background-color；

background-position；

background-size，规定背景图像的尺寸；

background-repeat；

background-origin，规定背景图像的定位区域；

background-clip，规定背景图像的绘制区域；

background-attachment；

background-image。;设置所有的背景属性－background

可以只设置其中一部分值，比如background:#ff0000url(smiley.gif);也是允许的。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

例如，以下代码同时定义了网页的背景颜色，背景图片、不允许重复、不随文字移动、居中等属性：body{background:#ff0000url(images/eg_bg_03.gif)no-repeatfixedcenter;};;/style

/head

body

h1使用CSS设置网页及段落的背景/h1

pclass=p1设置背景图像的位置示例1/p

pclass=position设置背景图像的位置示例2/p

/body

/html;例2-5小结

类名为p1的段落