HTML5+CSS开发 CSS3背景新增属性 CH5-2 CSS3背景新增属性.pptVIP

思路：利用背景图精确定位，并且不平铺 ul{ list-style-type:none; } li{ background: url(arr.gif) no-repeat 0px 3px; padding-left: 20px; } 向右 向下 防止文字和背景图标重叠 背景图片的叠加是指：当两个元素是嵌套关系时，那么里面元素的背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。 尽管CSS 3的背景属性已经支持多背景图，但考虑到IE8还不支持，因此多个元素背景的叠加还是有实用价值的 下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 固定宽圆角 可变宽圆角 div id=round h3 p span div id=round h3这是圆角矩形的标题/h3 pspan……/span/p /div 由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色就不会覆盖背景图片。 与此相反，为了让内容能放在距边框有一定边距的区域，必须设置padding值，而且padding值只能设置在最里层的盒子上。 透 明 图 像 图 像 图 像 图 像 ① ② ④ ③ ⑤ ⑥ 原理：背景图片比盒子长一些 背景图片： 里面的盒子 设置背景图片为从右边开始铺 外面的盒子 设置背景图片为从左边开始铺 把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于padding区域，不会影响圆角 style type=text/css a { font-size: 14px; color: #F1E474; text-decoration: none; background-image: url(xxwlzx/yuanjiao2.gif); height: 32px; padding-left: 24px; display: block; float: left; line-height: 32px;} b { background-image: url(xxwlzx/yuanjiao2.gif); background-position: right top; display: block; padding-right: 24px;} a:hover { color: #FFFFFF; } /style body a href=#b首 页/b/a a href=#b中心简介/b/a a href=#b政策法规/b/a a href=#b常用下载/b/a a href=#b为您服务/b/a a href=#b技术支持和服务/b/a #nav li a{ color:#fff; padding-top:7px; display:block; …… background:url(img/nav.gif); margin-left:2px; } #nav li a:hover{ background-position: 0px -26px; color:red; } a:hover { background-position:100% -42px; } a:hover b{ background-position:0 -42px; color: red; } HTML5应用开发 CSS3背景新增属性 背景（background）是网页中常用的一种表现方法，无论是背景颜色还是背景图片，都能为网页带来丰富的视觉效果 CSS背景属性是网页样式美化最主要的手段 CSS的背景属性是backgroud或以backgroud开头 background-color 设置背景颜色 background-color: #98AB6F; background-image 设置背景图像 background-image: url(a.jpg); background-repeat 设置背景图像是否及如何平铺 repeat : 背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像在横向上平铺repeat-y : 背景图像在纵向平铺 background-attachm ent 背景图像是否随对象内容滚动 scroll : 　背景图像是随对象内容滚动fixed : 　背景图像固定 background-position 设置背景图像位置 横轴(x) 纵轴(y) left | center | right top | center | bottom 50% 50%