前端学习 第一天

1.样式高度宽度变化的过渡

<div onclick="this.style.width='800px';this.style.height='400px';" style="100px;height:100px;background:url('http://img6.cache.netease.com/photo/0001/2016-05-18/BNAUNT5K00AP0001.jpg');transition:5s;">
</div>

transition：控制高度变化开始到结束需要经历的时长。

2.背景图片的设置

background-color

背景颜色。

background-position

规定背景图像的位置。 水平方向left right center   垂直方向有top bottom center  还有px像素，%

background-size

规定背景图片的尺寸。

background-repeat

规定如何重复背景图像。

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-origin

规定背景图片的定位区域。

background-clip

规定背景的绘制区域。

background-attachment

规定背景图像是否固定或者随着页面的其余部分滚动。

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-image

规定要使用的背景图像。            如果同时设置了background-color 该图片会显示在background-color之上

inherit

规定应该从父元素继承 background 属性的设置。

     合并背景写法background:#ccc url('http://img6.cache.netease.com/photo/0001/2016-05-18/BNAUNT5K00AP0001.jpg') 10px 20px no-repeat fixed;