1. 关键字, 例如: background-position: top right;
优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.
2. 像素, 例如: background-position: 0px 0px;
优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
3. 百分比, 例如: background-position: 80% 50%;
优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.
原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.
在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?
经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.
优点:
1. 1 + 1 < 2
图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.
2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 “已下载图片/图片总数”. 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.
3. 让浏览器将图标预先下载
浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.
缺点:
1. 图片难以管理, 难以定位
如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.
2. 2 > 1
两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.
应用:
1. 让图标尽量排列得有规律
有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸.
2. 将背景颜色一致的图标放置在一起
如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆.
3. 将相同栏目的图标放置在一起
这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了.
4. 不要将大图绑在一块
大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, “不耐烦” 会驱使他们去点 close.
拓展:
万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.
但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法.
转自:http://blog.163.com/ql_cn0304/blog/static/173706313200972884442594/
相关推荐
CSS中背景图片定位方法:background-position的用法,附带算法
css代码添加背景图片常用代码
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
背景图效果,还附有以使用精灵图的方式解决网站中的小图标问题,这种办法相比较之前的方法,稍微有点类似,主要用到background-position属性外,还需...
正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现,比如说CSS伪元素,他可以帮助我们模拟出这些CSS无法...
输入CSS地址 可以下载到该css以及里面的图片, 初学c# 使用.net 4开发的,大家有意见留言或者发邮箱都可以啊,欢迎大家指正
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
在css中,可以利用“background-size”属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加“background-size:cover;”样式,即可使背景图片的大小自适应。
解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也
一个很好的CSS工具,可以下载CSS中的背景图片
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
css背景颜色透明背景图片切换效果
css图片定位工具 很好用的 做html时把图片整合定位的好工具
CSS样式图片下载助手,css背景图片下载 可以下载css里面定义的所有图片
css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3
css3背景图片页面滚动视差效果
css背景图片自适应
CSS在图片中的应用 #face { width:580px; clear:both; height:66px; margin:0 auto; font-size:12px; } #face li { list-style:none; padding:0 0 0 25px; margin:0; width:57px; height:26px; line-...
模仿苹果导航条效果,背景图片大小适中适合导航文字宽度