发表于: 2017-04-05 21:06:20
1 575
今天完成的事情:
1、总结完善任务五,查看相关资料,并修改代码;
(1)background-repeat:
no-repeat——背景图片不重复
repeat-x——水平方向重复
repeat-y——竖直方向重复
(2)background-size:
length——设置背景图宽高,只设置一个数另一个auto
percentage——以父元素的百分比来设置背景图像的宽度和高度,只设置一个数另一个auto
cover—— 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。(图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少)
contain——把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺)
(3)background-attachment: 属性设置背景图像是否固定或者随着页面的其余部分滚动。默认值scroll滚动,fixed不滚动
(4)background-position:center;top 、left 、center、 bottom、 right组合控制九个位置(省略的默认center);数值, 数值(%、px、vw……)相对于父元素定位(省略默认取中值即一半)
方向值、数值、百分比可以混用
(5)background-clip 属性规定背景的绘制区域。border-box(默认值)背景被裁剪到边框盒。padding-box背景裁剪到内边距框、centent-box背景裁剪到内容框
(6)background-origin 属性规定 background-position 属性相对于什么位置来定位。
padding-box——相对于内边距框定位(默认值)
border-box——相对于边框盒定位
content-box——相对于内容框定位
(7)修改后代码
.wrap1{background-image:url(images/task52.png);
background-repeat: no-repeat;
background-size:cover;
width: 100vw;
height: auto;
margin: 0;
padding:0;
float: left;}
2、开始任务六,下载psd,查看学习资料——《CSS Sprite雪碧图》
3、写日报
明天计划的事情:
1、看师兄回复;
2、继续进行任务
3、写日报;
遇到的问题:
无
收获:
修改任务五代码,进一步学习background,开始任务六;其他:(/*我是注释*/用于style(css)注释,<!-- 我是注释 -->用于head、body注释)( 这个空格占位符的确好用)
评论