11 1.背景属性 1.1基本属性 口 background ■ background属性用于全面设置背景样式。该属性是一个复合属性, 可用于同时设置背景色、背景图片、背景重复模式等。为更好地控 制背景,一般不建议通过该属性来控制背景。 具体语法如下: p background: white url(img. gif) repeat-y center,] body background: url(mg. gif) top center fixed,] bricks( background repeat-y top url(mg. gif) 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 11 1.1基本属性 background background属性用于全面设置背景样式。该属性是一个复合属性, 可用于同时设置背景色、背景图片、背景重复模式等。为更好地控 制背景,一般不建议通过该属性来控制背景。 具体语法如下:
2 1.背景属性 1.2CS53新增背景属性 口CSS3新增的背景属性: 1103CSs3新增背景样式 background-clip 规定背景的绘制区域 background-origin 规定背景图片的定位区域 background.-size 规定背景图片的尺寸 backkground-break 规定內联元素的背景图像进行平铺时的循环方式 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 12 1.2 CSS3新增背景属性 CSS3新增的背景属性:
13 1.背景属性 1.2CS53新增背景属性 a background-clip 在HTM页面中,具有背景的元素通常有元素内容、内部补白 ( padding)、边框、外部补白( margin)四部分组成。 元素背景的显示范围在CSS2与CSS2.1、CSS3中并不相同。 口在CSS2中,背景的显示范围是指内部补白之内的范围,不包括边框。 口在CSS2.1和CSS3中,背景的显示范围是指包括边框在内的范围。 口在CSS3中,也可以使用 background-clip来修饰背景的显示范围。 如果将 background-clip的属性值设定为 border,则背景范围包括 边框区域,如果设定为 padding,则不包括边框区域。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 13 1.2 CSS3新增背景属性 background-clip 在HTML页面中,具有背景的元素通常有元素内容、内部补白 (padding)、边框、外部补白(margin)四部分组成。 元素背景的显示范围在CSS2与CSS2.1、CSS3中并不相同。 在CSS2中,背景的显示范围是指内部补白之内的范围,不包括边框。 在CSS2.1和CSS3中,背景的显示范围是指包括边框在内的范围。 在CSS3中,也可以使用background-clip来修饰背景的显示范围。 如果将background-clip的属性值设定为border,则背景范围包括 边框区域,如果设定为padding,则不包括边框区域
十 2 现场演示: ■案例11-01:两种 background-clip属性值的对比 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 14 现场演示: 案例11-01:两种background-clip属性值的对比
15 1.背景属性 1.2CS53新增背景属性 background-origin 在绘制背景图像时,默认是从内部区域( padding)的左上角开始, 但是可以利用 background- origin属性来指定绘制时从边框的左上 角开始,或者从内容的左上角开始。 在 Firefox浏览器中指定绘制起点时,需要在样式代码中将 background- origin属性书写成“moz- background- origin”的形 式;在 Safari浏览器或者 Chrome浏览器中指定绘制起点时,需要在 样式代码中将 background- origin属性写成“- webkit-background origin”的形式。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.背景属性 15 1.2 CSS3新增背景属性 background-origin 在绘制背景图像时,默认是从内部区域(padding)的左上角开始, 但是可以利用background-origin属性来指定绘制时从边框的左上 角开始,或者从内容的左上角开始。 在Firefox浏览器中指定绘制起点时,需要在样式代码中将 background-origin属性书写成“-moz-background-origin”的形 式;在Safari浏览器或者Chrome浏览器中指定绘制起点时,需要在 样式代码中将background-origin属性写成“-webkit-backgroundorigin”的形式