WEB前端第九课——div背景

1.div+css布局

　　

特征

　　① 可以定义文档中的分区或节（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

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

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