CSS背景图标定位.doc

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: right bottom;）阅读全文.使用百分比进行定位的好处是可以利用CSS的计算功能，达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中，使用background-position: 150px 150px; 可以看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。而把150px替换为50%，使用background-position: 50% 50%;看到的并不是如下的效果而是这样可见，CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用 background-position: 100% 100%; 定位的时候，图片被放置在容器的右下角，而并没有跑出容器。（如果使用 background-position: 300px 300px; 的话，背景图片会被移出容器）同样，如果使用background-position: 20% 20%;会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。核心提示：在CSS中，背景图片的定位方位有3种： 1）关键字： background-position: top right; 2）像素： background-position: 0px 0px; 3）百分比： background-position: 0% 0%; 上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前-在CSS中，背景图片的定位方位有3种：1）关键字：background-position: top right;2）像素：background-position: 0px 0px;3）百分比：background-position: 0% 0%;上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是“20px 10px”和60px 50px，都是图片的原点在那个位置上，图中用X表示。但是第三种定位，也就是百分比定位，不是这样。它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。比如，如果放置位置是“20% 10%”，实际结果如下图，可以看到这个点是在图片本身的“20% 10%”的位置上。下面是一个有趣的例子。背景图片是四个边长为100px的方块叠在一起：请问怎样才能将其横过来：答案是，在网页中先设置四个div区域：然后，这样编写CSS：.box1, .box2, .box3, .box4 float:left;width:100px;height:100px;position:relative;background: #F3F2E2 url(1234.png) no-repeat;.box1 background-position:0% 0%;.box2 background-position:0% 33.33333%;.box3 background-position:0% 66.66666%;.box4 background-position:0% 100%;可以看到第二和第三个方块的设置，并不是一般想象中的“0% 25%”和“0% 75%”。我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。代码：div background:#FFF url(image) no-repeat fixed x y;这里的background的属性值依次为：#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）image 背景图片：（这里是图片的地址）no-repeat 是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义。这个就是今天要讲的重点）背景图像定位中我们要明确的几点：1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。2、坐标轴的原点就是对应容器的左顶点。3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。5、x y的值可以用百分比或者px来表示。6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。下面我用几个图示来说明一下几种情况，蓝色块表示图片，虚线框表示容器（可以div，td，或者直接就是body），注意只有背景图片在容器内我们才能看见，我用白色表示可见部分，而且超出容器范围的是看不见的，我用灰色表示。容器的左定点的坐标就是（0，0）。第一张，背景图片和容的左上对齐，0px 0px 也可以写成left top第二张，背景图在容器中间，定点坐标为正值第三张，背景图部分在容器左上，定点坐标为负值- 到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片，返回去我们看一下开始的时候介绍的两个图片，我们就是可以用：背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。但是我们为了调用方便，在排列这些小图片的时候要讲究一点规则，比如：小图之间的距离通常是调用小图的容器的大小，或者距离更大一点，这样就可以避免在容器内显示出我们不愿意显示的图片！补充一点，如果定位用的是百分比话，算法比较特殊。我举个例子：代码：background:#FFF url(image) no-repeat fixed 50% -30%;这个时候图片应该在容器的什么位置呢,算法公式如下：图片左顶点距容器左顶点的坐标位置为 x：（容器的宽度-图片的宽度）x50% y：（容器的高度-图片的高度）x（-30%） 得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。 比如：容器是width：600px；height：600px；而图片是width：200px；height：200px； 我们用上面的样式，可以得到图片位置为： x：(600px-200px)*50% y：(600px-200px)*(-30%) 如下图：书写样式：background-image: url(./images/index.png);background-repeat: no-repeat;background-position: 2% 30%;总结 性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。现在的网站，内容在采集工具的帮助下，实在是不成问题了，那么什么让看到网站的人留下那？或者很多人回答漂亮？其实我个人的感觉是速度。个人心得很多人说，要速度，一定要divcss，其实也不全都如此。个人感觉，速度跟很多因素都有关系，比如全站图片，代码优化、css太长，也会导致速度很慢。平时我写css代码，一般来说，一个大站点，我都会写几个css来调用。比如首页可能会调用23个css。其中有通用部分，也有不通用的部分，这样会让css读取效率提高。本地测试，css文件代码超过1000行，定义class或者id数量超过400个的一个css打开载入页面时间是23个css代码不超过500行的css文件速度的2倍左右。所以，通常我会用几个css来让网站调用。下面说下如何让一个背景图片全站通用。以为例子（注意，是英文的yahoo，不是中文的）。英文yahoo的编写代码不太规范，但是很多大胆的尝试都不错。仔细分析他们的代码，全站背景图片其实就是2个，1个是1象素700长的，另外一个是4象素4300长度的。grd-4px.gif跟grd-1px.gif（因为高度太长，我就不在这里贴出来了）。全站通用一个背景图片，是提高速度的很大因素。这一个背景，可能是不同的位置不同的颜色样子，合成的一个但是可以在不同的位置调用。以动易来说，如果要仿yahoo的页面非常容易。通用css可以这样分类：1、标题背景2、css表格通用背景3、内容背景4、站内外搜索背景那么，如何定义呢？使用以下CSS定义即可：background-image:url(/Lectures/UploadFiles_3793/200612/20061210101340854.gif); background-repeat:repeat-x;background-position:0 -530px;注意最后一个定义，这个是通用一个背景图片的关键，就是调用背景图片的不同位置作为背景比如：定义“background-position:0 -530px;”，调用这个背景图片530px高度部分作为背景，从最左边开始铺垫。背景(Backgrounds)的属性： background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;语法是background:color image repeat attachment position;您可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color: transparentimage: nonerepeat: repeatattachment: scrollposition: 0% 0%这就是yahoo页面上面最与众不同的地方，纵观国内门户网站、网易、qq新郎搜狐都没有如此大胆的尝试。yahoo的页面代码很负责，并且通用了一个css，还有部分css定义是放在页面上面的，不知道是为了防止 css 偷学还是其他含义。的确，全部分析下来很难，因为同一个.ht的定义，居然分了8个部分才定义完所有属性。css里面几部分，页面里面居然还有yahoo跟msn的英文页面是类似的，msn的英文页面还好一些，大家也可以分析一下看看。但是yahoo的英文页面，如果真的学会了，相信对大家理解css以及div的感觉以及水平，会有很大的提高。网页设计标准尺寸: 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为上面只用到安全色，而中的或者以及或者的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K标准网页广告尺寸规格1、120*120，这种广告规格适用于产品或新闻照片展示。2、120*60，这种广告规格主要用于做LOGO使用。3、120*90，主要应用于产品演示或大型LOG