background
现在对 background 属性做总结
background-color: gray; 背景颜色
background-image: url(/i/eg_bg_04.gif); 背景图片
background-repeat: repeat-y; 背景图重复
这个属性值有三个: no-repeat/ repeat-x/ repeat-y 即不重复/ x轴重复/ y轴重复
background-position:center; 背景定位
它的值比较灵活, 可以为数值, 例如:
20px 20px; 表示以左上角为原点, 先 X 后 Y, 结合定位的写法理解, 省略只写一个表示只设置 Y 轴.
center center; 结合浮动来理解, 可以简写为一个, 只写 center 表示都为 center, 只写 top/bottom 或 left/right 默认没写那一项为 center, 但是不能和 0px 这种写法混合, 浏览器会无法解析.
50% 50%; 也是先 X 后 Y, 但写一个数值则另一个默认 50%, 这里写 50% 50%表示居中.
background-attachment: fixed; 背景关联, 即文档在上下滚动时, fixed 表示不随着文档滚动, scroll 表示随文档滚动(默认为此值).
--------------------以下为CSS3新增的属性----------------------------------------------
background-origin: content-box 背景起源, 表示背景图片从哪里开始平铺,有三个值(IE9):
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位。
background-clip: content-box 背景裁切, 表示控制背景从哪里显示, 和 background-clip 是不同的(IE9).
padding-box 背景被裁剪到内边距框
border-box 背景被裁剪到边框盒。
content-box 背景被裁剪到内容框。
以上两个属性可以合并写, 即只写一个 content-box 表示都为此值..
background-size: 600px 600px; 控制背景图片的大小, 会被拉伸或缩小. 可以写 100% 100%, 这里的百分数是相对于盒子的 width 和 height, 也可以写 auto, 表示在可显示范围内按原比例显示, 但有以下两个特殊值(IE9):
cover: 表示在规定的盒子范围内尽量大的显示(如果宽高不等比例, 则优先满足长边), 如果宽高远大于图片实际大小, 则图片会被放大(不留白).
contain: 让图片完整显示, 若盒子大小不满足则以将图片完整显示而等比缩小(会留白).
用途:让雪碧图中的 icon 放大两倍显示: 假如原图 220*898; 要显示的icon 大小为 120*25, 那么可以这样写:
div{
240px;
height: 50px;
border: 1px solid black;
background: url(img/icon.png);
background-size: 440px 1796px; ----原图的两倍
background-position: -106px -1374px; ----原图已经放大, 所以定位也要*2.
}
相应的, 缩小也会写了...
----------------------------------------------------------------------------------------
关于 bakcground 还可以写多个组合值, 这个可以再整理整理, 改天再发一篇.
以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.