Web前端开发技术与实践 第11章:背景与边框 阮晓龙 13938213680/rxl@hactcmeducn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 015.9
Web前端开发技术与实践 第11章：背景与边框 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口背景属性 口边框属性 口案例:图片轮转的实现 口案例:网页课程表的实现 米 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 背景属性 边框属性 案例：图片轮转的实现 案例：网页课程表的实现 2
3 1.背景属性 1.1基本属性 口背景的相关属性是用于控制元素背景色、背景图片等,同时可 以设置背景图片的排列方式。 口背景的基本属性主要用于定义背景的色彩、图片、重复方式等 基本内容 表1101背累的基本性 background-color 设置元素的背景颜色 把图像设置为背景 background-repeat 设置对象背景的背景图片是否平铺 background-attachment背景图像是否固定或者随着页面的其余部分滚动 background-position设置背景图像的起始位置 background 詢写蛋性,作用是将背景蛋性设置在一个声明中 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 背景的相关属性是用于控制元素背景色、背景图片等，同时可 以设置背景图片的排列方式。 背景的基本属性主要用于定义背景的色彩、图片、重复方式等 基本内容。 3 1.1基本属性
4 1.背景属性 1.1基本属性 a background-color ■ background- color属性用于设置元素的背景颜色。它的默认值取值 为none,允许下面的任何内容显示出来。 background- color属性和 color属性一样支持多种颜色格式。 pf background-color yellow,) body background-color #ccC] fun( background-color #000 #test( background-color rgb(0,0, 0), 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 background-color background-color属性用于设置元素的背景颜色。它的默认值取值 为none，允许下面的任何内容显示出来。 background-color属性和color属性一样支持多种颜色格式。 4 1.1基本属性
1.背景属性 1.1基本属性 a background-Image ■ background- image属性可以为元素指定背景图像。 如果图像包括透明区域,下面的内容将会显示出来。为防止这一点, 网页设计者通常将 background- image属性和 background- color属性 起使用。背景颜色显示在背景图像下面,提供了不透明的背景。 background- image属性需要一个UR来选择作为背景的相应图像。 ■用作背景图像的图片类型可以为浏览器支持的任何格式,通常为 GIF、JPG和PNG格式。 blbackground-image url(img. gif), background-color *fif, body background-image ur(mg. gif)] brick background-image url(img. gif)) #prison background-image url(mg. gif)) 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 background-image background-image属性可以为元素指定背景图像。 如果图像包括透明区域，下面的内容将会显示出来。为防止这一点， 网页设计者通常将background-image属性和background-color属性 一起使用。背景颜色显示在背景图像下面，提供了不透明的背景。 background-image属性需要一个URL来选择作为背景的相应图像。 用作背景图像的图片类型可以为浏览器支持的任何格式，通常为 GIF、JPG和PNG格式。 5 1.1基本属性
1.背景属性 1.1基本属性 口 background- repeat background- repeat属性决定当背景图像比元素的空间小时将如何 排列。 该属性的默认值为 repeat,这将让图像在水平和垂直两个方向上平 铺。当该属性取值为 repeat-x时,背景图像将仅在水平上平铺。当 该属性取值为 repeat-y时,背景图像将仅在垂直方向上平铺。当该 属性取值为no- repeat时,背景图像将不会平铺。 pbackground-image url(img. gif), background-repeatrepeat-x titleup(background-image url(img gif), background-repeat repeat-y, body ( background-image url(img. gif), background-repeat no-repeat 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 background-repeat background-repeat属性决定当背景图像比元素的空间小时将如何 排列。 该属性的默认值为repeat，这将让图像在水平和垂直两个方向上平 铺。当该属性取值为repeat-x时，背景图像将仅在水平上平铺。当 该属性取值为repeat-y时，背景图像将仅在垂直方向上平铺。当该 属性取值为no-repeat时，背景图像将不会平铺。 6 1.1基本属性
1.背景属性 1.1基本属性 a background-attachment background- attachment属性决定背景图像在元素的内容进行相应 滚动时是应该滚动还是应该停留在屏幕的一个固定位置。 这个属性的默认值取值为scro1l。当取值为 fixed时,可实现水印 效果,这和body>元素的专有属性 properties(由 Microsoft引 入)相似。 body background-image url (images/logo. png), background-attachmentfixed 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 background-attachment background-attachment属性决定背景图像在元素的内容进行相应 滚动时是应该滚动还是应该停留在屏幕的一个固定位置。 这个属性的默认值取值为scroll。当取值为fixed时，可实现水印 效果，这和元素的专有属性bgproperties（由Microsoft引 入）相似。 7 1.1基本属性
8 1.背景属性 1.1基本属性 a background-position ■ background- position属性指定背景图像,在元素的画布空间中的 定位方式 有三种方法指定位置 口为图像的左上角指定一个绝对距离,通常以像素为单位。 口可以使用水平和垂直方向的百分比来指定位置。 口可以使用关键字来描述水平和垂直方向的位置。水平方向上的关键字 为left、 center和 right。垂直方向上的关键字为top、 center:和 bot tom。在使用关键字时,未指明的方向上默认的取值为 center。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 background-position background-position属性指定背景图像，在元素的画布空间中的 定位方式。 有三种方法指定位置： 为图像的左上角指定一个绝对距离，通常以像素为单位。 可以使用水平和垂直方向的百分比来指定位置。 可以使用关键字来描述水平和垂直方向的位置。水平方向上的关键字 为left、center和right。垂直方向上的关键字为top、center和 bottom。在使用关键字时，未指明的方向上默认的取值为center。 8 1.1基本属性
9 1.背景属性 1.1基本属性 表1102背景位关字定位方式 匚关 水平位置 垂直位置 50% 100% 0% center left 0% 50% center center 50% centerr型 50% bottom left 0 bottom center% 100% bottom right 100% 1009 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 9 1.1基本属性
10 1.背景属性 1.1基本属性 a background-position ■具体语法如下 plbackground-image url(mg. gif), background-position: 10px 10px) pf background-image url( img.gif), background-position. 20%20%] body background-image url(img. gif), background-position: center center) 注意:如果仅仅设置了一个关键字,那么第二个关键字将取默认值 center。因此,在上面的例子 中,关键字 center只需用一次即可。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 10 1.1基本属性 background-position 具体语法如下： 注意：如果仅仅设置了一个关键字，那么第二个关键字将取默认值center。因此，在上面的例子 中，关键字center只需用一次即可
