08-1 背景的运用技巧讲义.ppt

3. 不用图片做圆角－山顶角方法 如果把最上方一条细线的颜色改为黑色，再设置下面三条细线的左右边框是1像素黑色，那么就出现了带有边框的圆角框效果了 4. 学习圆角制作的意义 由于人们的审美观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术是制作其他不规则图案栏目框的基础。例如图4-61所示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制作了。 背景的控制 CSS的背景属性 背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。 而CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。 CSS的背景属性是backgroud或以backgroud开头 CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项，是其他所有背景属性的缩写 其他背景属性的值的集合 background-color 设置背景颜色 rgb颜色 命名颜色 16进制颜色 background-image 设置背景图片 url background-repeat 设置背景图片的平铺方式 repeat（完全平铺） repeat-x（横向平铺） repeat-y（纵向平铺） no-repeat（不平铺） background-attachment 设置背景图片固定还是随内容滚动 scroll（默认值） fixed background-position 设置背景图片显示的起始位置 （[top] [left] [center] [center] [bottom] [right]） （[x%] [y%] [x-pos] [y-pos]） 各个背景属性的默认值 background-color: transparent 透明模式 background-image: none background-repeat: repeat 平铺 background-attachment: scroll background-position: 0% 0% background属性的缩写 background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为： background: background-color || background-image || background-repeat || background-attachment || background-position 如body {background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;} 背景的运用技巧 背景的运用技巧 同时运用背景颜色和背景图片 控制背景在盒子中的位置及是否平铺 多个元素背景的叠加 滑动门技术 背景位置的控制－实现图片的翻转 圆角的设计方法总结 同时运用背景颜色和背景图片 目前网页中流行采用一种渐变背景，即网页的背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色 通过在CSS中设置body标记的背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。 body{background:#666666 url(xxwlzx/body_bg.gif) repeat-x;} 控制背景在盒子中的位置及是否平铺 在html中，背景图像只能平铺，而在CSS中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的CSS背景引入。例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。 body { background: #F7F2DF url(cha.jpg) no-repeat right bottom ; } li元素的背景应用 通过背景图片不平铺的技术还可以用来改变列表的项目符号，虽然使用列表元素ul的CSS属性list-style-image:url(arrow.gif)可以将列表项前面的小黑点改