第11章CSS3美化背景与边框资料.ppt

;;11.1 设置背景;11.1.1 设置背景颜色;【例11-1】 在页面中添加文字、图片，并设置背景颜色为黄色。 style body{ background-color: #FF0; /*定义页面背景色*/ } p{ font-size:16px; /*定义文字样式*/ padding-left:10px; padding-top:8px; line-hright:120%; } span{ /*定义标题文字样式*/ font-size:80px; float:left; padding-right:5px; padding-left:10px; padding-top:8px; /style /head body img src=images/new.jpg style=float:right; / !--在页面中添加图片-- span福/span !--定义文字标题-- p对中国人来说，春节是最重要的传统节日。每逢春节，家家户户都要贴上鲜红的福字。聚福、纳福、惜福、享福，一生幸福！……在新的一年里滚滚而来，心想事成，万事如意/p /body; 在页面中合理的搭配背景颜色和文字，可以使页面更加的美观生动，本实例的运行结果如图11-1所示。 图11-1 设置页面背景色 ; 设置页面背景图片也是CSS中一种十分重要的内容。在CSS中使用background-image属性设置背景图片，语法如下： background-image:none | url(url) none：无背景图。 url(url)：使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他网站位置的图像名称。 页面中可以用JPG或者GIF图片作为背景图，这与向网页中插入图片不同，背景图像放在网页的最底层，文字和图片等都位于其上。 例如，使用background-image属性设置页面背景图像为bg.gif图片的代码如下： body{background-image:url(bg.gif)};1．设置背景图片的重复方式 在默认的情况下，使用background-image属性设置的背景图片将平铺整个页面，如果图片的尺寸小于整个页面，将自动重复，直到铺满整个页面。不过，在CSS样式中提供了设置图片重复方式的属性background-repeat，通过该属性可以让图片沿某一方向重复，也可以让图片不重复。 background-repeat属性的语法格式如下： background-repeat：repeat | repeat-x | repeat-y | no-repeat repeat：默认值，在X轴和Y轴均重复； repeat-x：在X轴上重复，即背景图片在横向上平铺； repeat-y：在Y轴上重复，即背景图片在纵向上平铺； no-repeat：图片不重复，即背景图片不平铺。 background-repeat属性除了以上4个参数外，如果在CSS 3中，还包括round和space两个参数，其中round用于指定背景图像自动缩放直到适应且填充满整个容器；space用于指定背景图像以相同的间距平铺且填充满整个容器或某个方向。; 【例11-2】 为页面设置只在横向重复的背景图片。 background-image:url(android.png); background-repeat:repeat-x; 运行结果如图11-2所示。 图11- 只在横向重复的背景图片 ;2．设置背景图片的位置 页面中的背景图片默认是从左上角开始出现的，在实际制作中，往往希望图片出现在指定位置，在CSS中通过background-position属性实现设置页面中图片的背景的位置。语法如下： background-position：[value] | [top| center| bottom] | [left| center| right] 该属性可以确定背景图像的绝对位置，这是HTML标记不具备的功能。该属性只能用于块级元素和替换元素（指一些已知原有尺寸的元素，包括img、input、textarea、select和object）。背景图像位置属性值如表11-1所示。 表11-1 background-position属性的属性值;; CSS中不仅可以设置图片的右下显示，还可以给背景图片的位置定义具体的百分比，实现精确定位。例如： background-position:40% 60%; 这样设置完后，页面中图片位置在水平方向上处于40%的位置，在竖直方向上