HTML5+CSS3基础开发教程_全套PPT课件.ppt

3．background-size该属性用于设定背景图像的尺寸，应用格式为：background:widthheight其中参数width为背景图片的宽度，height为背景图片的高度。下面通过一个例子来演示background-size的显示效果，示例代码如下。htmlmetacharset=gb2312/stylediv/*页面中所有div元素应用的样式*/{ padding:30px; border:dashed1px;/*设置边框样式*/ background-image:url(log.jpg);/*设置背景图片*/ background-repeat:no-repeat;}div[id=div1]{ /*设置背景图片大小*/ background-size:20px20px;}/stylebodydiv/divbrdivid=div1/div/body/html本段代码中定义的两个div，分别显示原图片和设置了大小的图片。保存此段代码并在浏览器中运行，得到的结果如图12-19所示。图12-19指定背景图片大小4．background-break该属性用于设定内联元素背景图像平铺时的循环方式，可取值包括bounding-box、each-box和continuous。当该属性设置为bounding-box时，背景图片在整个元素内平铺；当该属性设置为each-box时，背景图片在每一行中平铺；当该属性设置为continuous时，下行的背景图片将继续前一行的背景图片继续平铺。下面通过一个例子来演示background-break属性的显示效果，示例代码如下。!DOCTYPEhtmlhtmlmetacharset=gb2312/styletype=text/cssspan{background-image:url(log.jpg);/*设置背景图片*/color:yellow;/*设置文字颜色*/line-height:20px;/*设置行高*/}span[id=span1]{/*背景图片在整个元素内平铺*/-moz-background-inline-policy:bounding-box;}span[id=span2]{/*背景图片在每一行中平铺*/-moz-background-inline-policy:each-box;}span[id=span3]{/*下行的背景图片将继续前一行的背景图片继续平铺*/ -moz-background-inline-policy:continuous;}/stylebodydivspanid=span1示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字/span/divbr/divspanid=span2示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字/span/divbr/divspanid=span3示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字/span/divbr//body/html本例中由于span元素内文字较多，当浏览器窗口小的时候会自动换行。三个DIV元素中的span元素分别设置了不同的平铺方式。保存此段代码并在浏览器中运行，得到的结果如图12-20所示。图12-20设置背景图片平铺方式由于目前其他浏览器不支持background-break属性，本例我们是在Firefox浏览器中运行并截图的。12.4.3控制颜色样式在CSS3没有出现之前，使用样式设定颜色都是通过RGB（其中R代表Red红色，G代表Green绿色，B代表Blue蓝色）颜色值实现的，同时开发人员只能通过opacity属性来设置元素的透明度。在CSS3中提供了三种新的颜色值：RGBA、HSL以及HSLA，并且允许开发人员通过对RGBA颜色值和HSLA颜色值设定alpha通道的方式，实现叠加效果。1．使用RGBA设置颜色样式所谓的RGBA是在原来的RGB基础上增加了alpha通道值设定用于控制透明度，Alpha通道值的取值范围在0至1之间，从透明（取值0）逐渐过渡到不透明（取值1）。RGBA颜色的应用格式如下：rgba(r,g,b,a)其中参数r、g、b、a分别代表红颜色值、绿颜色值、蓝颜色值以及透明度。下面通过一个例子来演示