CSS背景图标定位.docVIP

N个图标集于一张背景图在网页显示指定区CSS背景图定位原理 我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（为何现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。主角就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，看到只该看到的而已。就好比手表上的日期，今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。 我们使用YUI页面网格样式（CSS Page Grids）：7个基本的用css组织子组件的页面框架，支持130种不通的页面布局,CSS Page Grids，用它可以很方便的布局你的网页,用yui要下载他的控件包的下载地址是/projects/yuielements css frameworks 是一个实用的CSS框架，它是为了帮助设计师更快更高效的来写CSS建立的各人感觉YAHOO的YUI GRIDS CSS比较好用些提供了4种预设的页宽,6种预设模板和再分为2 3 4卷的区块功能.可以组合很多的页面布局组合的sprite.png举个例子，假如我们有这么一段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的漂亮图片（这样我们的网站才能够吸引人，才可以卖钱，才可以到佛罗里达晒太阳）： 最大化max 最小化min 这两个class都使用同一个图片： .min, .max { width:16px; height:16px; background-image:url(/yui/build/assets/skins/sam/sprite.png); background-repeat: no-repeat; text-indent:-999em; } background-position默认为 0 0，位于Y轴的350px处，最小化位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：.max { background-position: 0 -350px; } .min { background-position: 0 -400px; } 优点 我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。 缺点 至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。 由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。 前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是加大图片之间的距离，这样可以保持有限度的缩放。百分比进行背景图片定位repeat-y right top; 水平靠右，垂直靠顶repeat-y right 20px; 水平靠右，垂直20px位置repeat-y left -530px; 水平靠左，垂直-530px的位置百分数定位很有意思，可以实现非凡的效果。 大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用 background-position: 50% 20px; 之所以不使用 background-position: center 20px; 是因为类似这种描述性词语和数值混用的形式不被W3C推荐。（单纯的描述性词语组合使用是没有问题的，例如：background-position: ri