CSS 背景

这阵子又贪玩了。没有继续下去。。。。。

罪过罪过~~~

知识的积累总是厚积而薄发，坚持下去总会有个好结果的，慢慢补上吧！

 

一、背景图像效果

 

1、背景图像基础

    ①简写方式：background：url("1.jpg") no-repeat #00ff00 20px 30px ;

    ② 背景的定位问题

   

    ③背景进行定位时，像素数值和百分比不要混用。

 

2、CSS3中的一些属性总结

    常用的属性：background、background-color、background-image、background-repeat、background-attachment、background-position

    background-origin、background-clip、background-size；

 

①background-image : url1, [url2, url3....]

用于多张背景图片的使用。当背景图片与背景色同时存在时，背景图在背景色之上。

 

②background-repeat ： repeat-x [repeat-y, repeat, no-repeat, round, space]

    round: 背景图像自动缩放直到适应且填充满整个容器。

    space：背景图像以相同的间距平铺且填充满整个容器的方向。

 

③background-attachment : fixed [scroll, local]    设置背景图像是随对象内容滚动还是固定的

    fixed ： 背景图像相对于窗体固定。

    scroll ： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

    local ：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）。

 

④background-position：percentage [length, center, left, right, top, bottom]

用于定位背景图像。参数一般为两个，CSS3中规定可以使用3个或者4个，但浏览器支持情况较少。

 

⑤background-origin：padding-box [border-box，content-box]

用于设置背景图像的参考原点。

padding-box：从padding【含padding】 部分开始显示背景图像。【默认】

border-box：从border【含border】r部分开始显示背景图像。

content-box：从content【含content】t部分开始显示背景图像。

 

⑥background-clip：border-box [padding-box, content-box]

padding-box: 从padding区域（不含padding）开始向外裁剪背景border-box: 从border区域（不含border）开始向外裁剪背景content-box：从content区域开始向外裁剪背景这个属性，往往要配合background-origin同时使用。

⑦background-size：auto [length, percentage, cover, contain]

length：用长度值指定背景图片大小，当为单一值时，图像根据这一值进行等比缩放。

percentage ： 用百分比指定图片大小，当为单一值时，图像根据这一值进行等比缩放。

cover ：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。