前端学习 第一天

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

<div onclick="this.style.width='800px';this.style.height='400px';" style="width: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;

转载于:https://www.cnblogs.com/linxw/p/5503939.html