CSS 属性 background-position 的 W3C 定义
最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.
我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:
[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
从编写规则我们可以看出, background-position 的值可以是代号, 数值, 百分比; 可以是一个单值, 双值; 还可以是 inherit.
background 属性中可以包含 background-position 属性, 其编写规则一致. W3C 列出的例子如下:
body { background: url("banner.jpeg") right top } /* 100% 0% */ body { background: url("banner.jpeg") top center } /* 50% 0% */ body { background: url("banner.jpeg") center } /* 50% 50% */ body { background: url("banner.jpeg") bottom } /* 50% 100% */
前两行列出了横向和纵向两个位置, 第一个是横向的, 第二个是纵向的. 后两行只有一个值, 另一个值缺省, 缺省值将被浏览器默认为 center.
我也是一直这样写的, 也就是当需要双值的时候写两个值, 不需要的时候单值. 但是今天发现这样书写的 CSS 代码会被 W3C 的 CSS Validator 认为是错误的, 
将 Profile 设置为 CSS 2, CSS 2.1, CSS 3 进行校验都会出错, 
出错信息如下:
Value Error : background Parse Error [empty string]
也就是说, 今后在 background 标签上不能再使用单值为图片定位, 否则不能通过 W3C 认证.
还没结束, 因为我对此好奇, 所以也在 background-position 属性上使用单值去校验了几次, 发现并不会报错. 也不知道 W3 组织是基于什么考虑, 让两个属性的编写规则进行差异处理, 否定了自己的文档而且还不能统一. 
好吧, 我就改一下吧. 于是我在迷惑和无奈中把值补全了, 并不断地安慰自己说, 把东西写全是有好处的, 起码浏览器解析速度将有所提高 (尽管微乎其微). 
你太追求完美了，哈哈。
貌似我不偷懒还有好处。
貌似越来越冷清了。
占楼，送祝福~
祝元旦快乐
@dollie
我錯了～～
我想请问一下如何用CDATA封装Recent Comments的内容????
....
//
....
Recent Comments...变成你的源码这样啊.
@dollie
貌似是在alpha階段的Paled的～～私人的?
If men want to learn about this post they should buy essays choosing the paper writing services.
@keon </a
mg12说了这是private主题了吧
其追根到底的精神跟我一样..
PS:呃.. 阁下的图貌似挂了.....
我的博客独立了。新的地址是http://www.xvsj.c.la/ 从RSS订阅器里一个个通知。头疼。
我都不清楚我现在在用的这个主题有没有达到W3C标准
我碰到这样的错误都无所适从，，，唉
對於background的定位，我一直都是全寫的。
幸好有這個習慣，不用特意再做修正了:)
thanks for sharing, anyway I did some modify into ur neoease themes I hope thats just fine and hope you give me some suggestion, thanks alot MG12
技术问题一点不懂，看着眼花。。。。。纯粹打酱油地。。
祝福博主圣诞快乐！！
平安夜快乐～～～～
還真的不能不多注意啊！
我抄袭了你现在这个主题的样式～～把它弄到inove里～～
～～～ 
介意不～～
@bolo
那说明 W3 组织被微软收买了, 或者已经沦陷了.
@zhouqi
因为我懒, 不想处理嵌套的效果, 所以做成这样了.
@玛格丽特苏
百分比的意思是图片的 N% 的位置放置在容器 N% 的位置上. 0% 相当于 top 和 left, 50% 相当于 center, 100% 相当于 bottom 和 right, 他的好处是可以和数值混用, 但关键字不可以.
@江流
欢迎加入折腾队伍.
歌颂为人民服务的伟大同志，哈哈。慢慢补=。=
@玛格丽特苏
现在要求写双值，第一个值是X轴上的位置，也就是横坐标，另一个是竖坐标
@bolo
好吧，所在容器。然后比如50％是指距离所在容器左边或上边，长度是所在容器宽度或者高度的50％的位置吗？
@玛格丽特苏
所在容器宽和高的百分比
大大，那个百分比是怎么说的，是距离屏幕左边的百分比和距离屏幕上面的百分比么？分号下面是显示器宽和高？
一个值缺省, 缺省值将被浏览器默认为 center
原来还能这样
提个小意见：评论里的主人回复那:hover的时候，出来的原评论内容鼠标不能移上去，我本来想点里面的一个链接的，虽然可以通过锚链回到原评论
少折腾有好处
不过我们写代码还是要严谨点的。
几乎没用过单值去设置过，而且比较喜欢用数值
另外现在CSS Validator 好像允许直接把IE HACK写进CSS里了，这样的话以后不用另外写个ie.css文件了
@Mars
如果在新版本的规则中如此定义很合理, 但不晓得为什么他把老版本 (包括经典版本) 都修改了.
@bolo
嗯, 是的, 我就是最近发现的.
@QiQiBoY , @fatkun
很好... 呵呵~
貌似我一直写全。。。因为我不知道单个具体是什么意思。。-
老是做不到沙发。
原来图片定位还可以写单值。。。。我一直以为要写全。。。。看来不偷懒还是正确的。。
前几天就发现了，原来无错误和警告的CSS现在满是warn了
哎，不管W3C基于什么样的考虑，我只希望“少折腾”
学习了，虽然现在没啥概念；
@忘记月亮
我很多文章都是写了一半 (一般只开个头) 没时间写完, 这个星期我只是结束了其中几个.
学习啦 没怎么注意一直
这几天很勤快啊，更新很频繁。