今天完成的事情：
使用background-image 和background-size:cover布置好了任务五的背景图片，学习了用于背景的几个相关属性：
background-image属性的默认值是none,表示背景上没有放置任何图像，如需设置图像，，必须为这个属性设置一个个url值：
background-image：url(图片名或者绝对地址）；
背景平铺
background-repeat属性的默认值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-repeat：repeat-y; <!--垂直平铺-->
背景定位
background-position属性改变图像在背景中的位置，为background-position属性提供值友很多方法。可以使用一些关键字，top, bottom, left, right, center。还可以使用长度值，比如100px或百分比，不同类型的值对于背景图像的放置稍有差异。
关键字：
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需此声明：
background-position:top; <!--图像位与元素中部上方-->
百分数值：
background-position:50% 50%；<!--图像中心点与其元素中心对其-->
百分比数值同时应用于元素和图像，图像中心描述为50% 50%的点与元素中50% 50%的点对齐。如果图像位于0% 0%，其左上角将放在元素的左上角，100% 100%，图像的右下角放在元素的右下角。
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%.
背景图片尺寸
background-size属性， 属性规定背景图片的尺寸，不设置表示默认图片大小，能够以绝对吃春或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度，设置100%表示全屏显示图片，按比例缩小或者放大。
background-size:63px 100px； 固定大小
background-size:100% 100%; 拉伸使其铺满父元素
background-size:cover; 背景图像完全覆盖背景区域
background-size:contain； 把图像扩展至适应其高度和宽度的最大尺寸
背景关联
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。可以声明图像相对于可视区是固定的（fixed）
background-attachment:fixed <！--相对可视去固定-->
明天计划的事情，使用position做好任务五的中间文字部分和页脚。
遇到的困难:
最开始布置背景图片的时候，使用了background-size:100%; 和background-repeat:no-repeat,图片无法达到预期的大小，重新设background-size:100% 100%; 又无法等比例的放大，后来发现background-size:的cover可以把背景图片完全铺满父元素的大小，并可以等比例的放大。
收获：
学会了背景图片的几种布局方式，以及如何定位背景的位置。
返回列表
评论