CSS 中背景图片定位
Sep 21st, 2008
Add Comment
今天在弄一个 JavaScript 动画效果, 需要处理 CSS 中的 background-position. 想试一下我陌生的百分比处理方式, 发现了一个不错的文章, CSS: Using Percentages in Background-Image . 稍整理了一下...
1. 关键字, 例如: background-position: top right;
优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.
2. 像素, 例如: background-position: 0px 0px;
优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
3. 百分比, 例如: background-position: 80% 50%;
优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.
原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: CSS 中背景图片定位
来看一下
Thanks! It helps me a lot.
学习学习。
@凯尔
嗯, 我也想过屏蔽 Quote, 以后可能会加个参数.
呀呀，顶部的Search切换很有爱啊~~
用了Quote，最好在Recent Comments里面将Quote屏蔽。
+1
百分比还是用得比较少，一般情况我不愿意看到图片自己的缩放，这样经常会看到不期望的锯齿。但是如果是做自适应分辨率的主题，可能会比较有用。
学习了，关于背景的css属性我一般只用到no-repeat哈。
@JAY
貌似插件 WP Ajax Edit Comments 是将按钮直接放在评论内容内.
暂时不用这插件吧, 呵呵~
谢谢呢~
貌似Quote功能有点问题，这个会把AjaxEditComments的代码也Quote出来。
图很有爱~
呵呵，昨晚鼓捣半天，我还以为是我的博客问题呢
已经用上新的，一切正常，再次表示感谢！~~
@Patrick
Sorry, 我发了老版本的给你. 现在给你个最新的, 请查收邮箱附件.
写得不错~转转~
插件我已经用上，调用是这样的《?php wp_mostactives('limit=5&avatar=true'); ?》
但是点击lazy按钮为什么它不会翻页呢？
@Patrick
1. 可以的. 请查阅你的邮箱...
2. 这个我已经写过教程了, 请看: http://www.neoease.com/wordpress-menubar-4/
哇，终于等到你回来了
有两件事请教：
1、你的侧边栏Most Active Guys这个功能使用的插件可不可以发给我一个啊？我用的是Blocks的主题，也很想使用这个插件
2、那个侧边栏日志分类如何实现鼠标放上以后子分类自动显示的，可以指点一下么？
谢谢！
图片很帅..
其实这东西米难度, 一点都米难度.
自己体会就是了.
无语.. 这里还有沙发..