首页 > HTML > 文章正文

WEB前端第九课——div背景

更新时间:2020-07-21

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

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

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

 

相关文章
相关标签