CSS 和 CSS3 中的 background

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{

                        width:240px;  

                        height: 50px;  

                        border: 1px solid black;  

                        background: url(img/icon.png);

                        background-size: 440px 1796px;  ----原图的两倍

                        background-position: -106px -1374px;   ----原图已经放大, 所以定位也要*2.

                  }

                  相应的, 缩小也会写了...

 

----------------------------------------------------------------------------------------

 关于 bakcground 还可以写多个组合值, 这个可以再整理整理, 改天再发一篇.

以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.