WEB前端第九课——div背景

1.div+css布局

　　<div>特征

　　① 能够定义文档中的分区或节（division/section）

　　② 能够把文档分割为独立的、不一样的部分，能够用做严格的组织工具

　　③ 是一个块级元素，它的内容会自动开始一个新行

　　④ 通常经过 id 或 class 标记与CSS配合使用

　　经常使用到的CSS属性：

　　width:数值、height:数值、background-color:颜色、float-left（是div不占据一行）

2.background-color背景颜色

　　默认值是transparent（透明的）

　　当同时定义了背景图像和背景颜色时，背景图像将覆盖背景颜色之上

　　颜色取值方式：

　　　　① 关键字，如red、blue等

　　　　② 16进制，如#000000、#cccccc、#ff0000等

　　　　③ rgb（0,0,0）

　　　　④ rgba（0,0,0, .n），n为0~1，透明度

3.background-image背景图片

　　默认值是none（没有图片）

　　元素背景占据了元素的所有尺寸，包括内边距和边框，但不包括外边距

　　经过url使用绝对或相对路径指定图片，background-image:url("");

4.background-repeat背景图片是否重复

　　经常使用属性：

　　repeat，默认值，background-image默认水平方向和垂直方向平铺显示

　　repeat-x，背景图片将在水平方向重复

　　repeat-y，背景图片将在垂直方向重复

　　no-repeat，背景图片将仅显示一次

　　语法示例

body{
        background-image: url("");
        background-repeat: no-repeat;
        }

5.background-size背景图片尺寸

　　length，设置背景图片的宽度和高度，第一个值设置宽度，第二个值设置高度，若是只设置一个值，则第二个值会被设置为“auto”

　　percentage，以父元素的百分比来设置图片的宽度和高度，后文同上

　　cover，把背景图片扩展至足够大，以是背景图片彻底覆盖背景区域，背景图片某些部分也许没法彻底显示在背景区域中

　　contain， 把图片扩展至最大尺寸，以使其宽度和高度彻底适应内容区域，背景区域某些部分可能没法彻底覆盖

6.background-position背景图片位置

　　position是相对于外部容器而言，非整个页面

　　属性值书写方式：

　　① 使用方位关键词定义，第一个值定义水平方向（left、center、right），第二个值定义垂直方向（top、center、bottom）

　　② 使用百分比定义，第一个值定义水平方向，第二个值定义垂直方向，左上角是“0% 0%”，右下角是“100% 100%”

　　③ 使用具体数字定义，第一个值定义水平方向，第二个值定义垂直方向，左上角是“0px 0px”

　　属性特色：

　　① position的默认值为区域的左上角，即0点坐标

　　② 以上三种方式，若是仅定义了一个值，则另外一个值为居中（center或50%）

　　③ 以上三种方式能够混合搭配使用

7.background-attachment背景图片是否随内容滚动

　　属性值：

　　① scroll，默认值，随页面其他部分的滚动而移动

　　② fixed，页面滚动时，背景图片不动

body{
     background-image: url("");
     background-attachment: scroll;
     }

8.background简写

　　background 简写属性能够在一个声明中设置全部的背景属性。

　　能够设置属性以下：

　　background-color

　　background-image

　　background-repeat

　　background-attachment

　　background-position

　　background-size

　　若是不设置其中某个值，也不会出问题，自动取默认值

　　在书写属性值时，没有严格顺序要求，建议按照上文列表顺序依次设置