html5-CSS学习-background记录

为了提高点效率，写个博客睡觉~

这次是background的解释

首先：可以这个样子来设置背景：

background: #00ff00 url(images url) no-repeat fixed top;

这样子就一下全都设置了啊，当然也可以分开设置：

1  background-image :   url ( image   url );
2  background-repeat :   no-repeat ;
3  background-position :   center ;
4  background-color :   #ffff00 ;
5  background-attachment :   fixed ;

上面这种办法是我比较喜欢的，比较容易看懂啊。

解释一下1行是设置背景图片，说下url()这个东东里面的地址一般来说用相对地址，假如把他放到CSS的单独文件里，那么就是CSS文件的相对地址，假如放到html文件里，不外链CSS文件，那么就是html文件的相对地址。

第二行是对于背景是否重复。默认应该是重复的。

第三行是默认的位置。

第四行是背景图片，对于他一般来说不重复的时候对于div块里的空白地方会填充的颜色。

第五行是什么？是背景是否随着上面的文字神马的一块动么。。一种是fixed，一种是scroll，

http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment

这里有个测试链接，可以去尝试下，，挺简单的.

好的，说一个比较不错的功能：

backkground-origin: padding-box/content-box/border-box;

三个属性，第一个是相对于内边距放置背景图片，第二个是对于内容，第三个是对于边框。

在background-attachment:fixed的时候是没效果的。所以要记清楚设置。

测试链接： http://www.w3school.com.cn/tiy/t.asp?f=css3_background-origin

http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin

background-clip: padding-box/content-box/border-box;这个和上面的一样，不过这个规定的是背景图片的绘制区域。

测试链接： http://www.w3school.com.cn/tiy/t.asp?f=css3_background-clip

好的，就这些，还有一个background-size:  length | percentage |cover|contain;

设置背景图片大小。四种不同方式。

第一种：length 则：background-size: 100px 100px;第一个是长，第二个是宽；

第二种percentage则：background-size:50% or background-size: 50% 60%，你懂得，是父图片的百分比；

第三种cover 则：background-size: cover;完全覆盖背景区域，可能会扭曲啊。

第四种 contain 则： background-size: contain; 会放大至足够区域来覆盖，不会所有地方覆盖的。

所有就这些了。。。mark结束，准备看其他标签。