今天完成的事情：完成任务五
明天计划的事情：任务六
遇到的问题：暂无
收获：

Background属性

background:<color><image><position><attachment><repeat>

例如, 这些设定...

background-color: transparent;

background-image: url(image.jpg);

background-position:50% 0 ;

background-attachment: scroll; background-attachment属性定义用户滚动页面时背景图片会发生什么。

background-repeat:repeat-y;

background-position

是盒子宽度与图片宽度之间相互的作用

计算公式

positionX = (容器的宽度-图片的宽度) * percentX;

positionY = (容器的高度-图片的高度) * percentY;

图片向右移动：（800-400）*50%=200px

图片向下移动：（400-200）*50%=100px

出现负值则出现相反移动

图片向右移动：（800-400）*50%=-200px，即向左

图片向下移动：（400-200）*50%=-100px，即向上

Background Clip

关于border与background属性的问题。

background-clip 属性让你能控制在哪显示你的背景.可能的值有：

background-clip: border-box;

background 在 border内显示，和现在的方式一样。.

background-clip: padding-box;

backgrounds 在padding内显示,而非border，跟IE6的处理方式相同。

background-clip: content-box;

backgrounds 只显示在内容内,而非border 或 padding。

background-clip: no-clip;

默认值，和border-box一样。

Background Origin

这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样).

background-origin: border-box;

background-position从border左上角开始计算。

background-origin: padding-box;

background-position从padding左上角开始计算。

background-origin: content-box;

background-position从内容左上角开始计算。

 Background Size

 background-size属性用来重定义你的背景图片大小。其可能值有：

background-size: contain;

缩小图片以符合元素大小。

background-size: cover;

扩展图片以符合元素大小。

background-size: 100px 100px;

重定义大小。第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

background-size: 50% 100%;

用百分比重定义。第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

Contain与cover的区别

Contain：会根据盒子宽与高之间的最小值来进行图片的缩放；

Cover：与contain相反，按照宽与高之间的最大值进行缩放；

导致现象：contain缩放时很可能产生没有覆盖盒子的情形；而cover是将盒子铺满。