第7章用CSS设置图像和圆角讲述.ppt

7.2.4　设置多重背景图像 background是CSS中使用最多一种属性。为了设计师能够灵活地设计网页效果，CSS 3增强了该属性的功能，允许在同一元素内叠加多个背景图像。background属性可以设置很多不同的值，从而对背景图像设置不同的样式。 拼合图像素材 多背景拼合效果 7.2.5　设置背景图像位置 通过background-position属性设置背景图像的具体位置。 将背景图像放在左上角 用百分比设置背景图像的位置 7.2.6　固定背景图片位置 在网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动。 使用CSS的background-attachment属性可以把背景图像设置成固定不变的效果，使背景图像固定，而不跟随网页内容一起滚动。 背景图像会随页面一起移动 将背景图像固定在浏览器窗口中 7.2.7　设置背景图像坐标原点 background-origin属性定义background-position属性的参考位置。在默认情况下，background- position属性总是以元素的左上角坐标原点进行背景图像定位。使用background-origin属性可以改变这种定位方式。 设置背景图像坐标以边框开始 7.2.8　设置背景图像的大小 在CSS 2.0及以前的版本中，图像大小是不可以控制的，如果想要使背景图像填充元素的背景区域，则需要事先设计更大的背景图像，否则背景图像只能按照平铺的方法进行填充。CSS 3新增了background-size属性，该属性可以控制背景图像的大小。 没有控制大小之前 控制大小之后的效果 7.2.9　设置标题的图像替换 使用背景图像的方式替换标题。 制作一个标题背景图像 图像替换的最终效果 7.3　设置圆角效果 在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强项。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的都只能是单调的矩形方框。而在网页中，经常需要用到圆角的设计。本章专门对圆角的设计进行介绍。 7.3.1　圆角属性 在CSS 3之前，如果要用圆角效果，需要图像文件才能达到。在CSS 3中可以使用border-radius属性就可以实现圆角效果。 7.3.2　圆角实例 div{ height:120px; border:10px solid #C0C; -moz-border-radius:20px; /*兼容Gecko引擎*/ -webkir-border-radius:20px; /*兼容Webkit引擎*/ border-radius:20px ; /*兼容标准引擎*/ } 元素四角均为圆角 7.3.3　圆角实例 使用border-radius属性可以设置容器边角效果。 不同属性值的效果 7.3.3　圆角实例 不同属性值的效果 小结 本章介绍了图像边框和图文混排以及背景图像的设置。本章中需要重点理解边框背景、背景的设置方法，包括背景颜色、边框背景和背景图像，特别是背景图像的具体属性，包括位置、平铺等内容。 本章还包括关于使用CSS 3设置圆角效果。需要特别指出的是，制作圆角框的方法远远不止本章介绍的这几种。不同的方法适用于不同的情况，因此需要具体问题具体分析。 第7章 用CSS设置图像和圆角 本章简介： 图片是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图片风格样式的方法，包括图片的边框、对齐方式和图文混排等，并通过实例综合讲解文字和图片的各种运用。 使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的都只能是单调的矩形方框。而在网页中，经常需要用到圆角的设计。 用CSS设置图像样式 7.1 用CSS设置背景样式 7.2 设置圆角效果 7.3 7.1　用CSS设置图像样式 图片不仅能够增加网页的吸引力，同时也大大地提升了用户浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。 作为单独的图片本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊的效果。首先讲解用CSS设置图片基本属性的方法，为进一步深入探讨打下基础。 7.1.1　设置图片边框 在HTML中可以直接通过img标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置该值为0时，则显示为没