content,padding,border都会有背景
只要是可见框范围内都会有背景

background-color

background-clip

设置背景显示的区域

border-box

背景会延伸到边框的下边
内容区，内边距，边框都有

content-box

背景只会设置到内容区
只有内容区有

padding-box

背景会设置到内边距
内容区域和内边距都有

background-image

设置背景图片

  1. background-image: url('image/1/png');

URL依据在哪里写就相对于哪个文件写

背景颜色和图片可以同时设置
这样颜色将会作为图片的底色显示

背景图片默认会在网页中水平垂直双方向重复

设置背景图片
如果图片小于元素，则图片默认会从元素的左上角开始平铺
如果图片大于元素，则多余的部分不会显示

background-position

设置背景图片的位置

设置方式

1、可以通过**位置关键字**来设置位置

  • top
  • left
  • right
  • bottom
  • center

位置需要两个值共同确定
如果只写一个值，那么第二个默认是center

background-position:top left;
background-position:top center;
background-position:top right;

background-position:left center;
background-position:center center;
background-position:right center;

background-position:bottom left;
background-position:bottom center;
background-position:bottom right;

2、可以通过指定**偏移量**来设置背景图片的位置
第一个值，水平方向偏移量
正值，背景向右移动，负值向左移动

第二个值，垂直方向的偏移量
正值，背景向下走，负值向上走

正值都是往中心走，负值都是往外走

background-size

可以用来设置背景图片的尺寸
需要两个值作为参数：宽度 高度
可以设置数值或者百分比
cover
contain

background-size: 200px 100px;

显示的图片宽200px，高100px

background-size: 100%;

宽高都全部显示

background-size: auto 100%;

高度自动适应，高度是全部显示

background-size: cover;

背景把元素撑满，确保图片的比例不变
可能有部分图片从元素中溢出

background-size: contain;

完整显示背景图片可能会有位置没有图片

background-repeat

设置背景图片的重复方式

repeat

默认值，双方向重复

repeat-x

水平方向重复

repeat-y

垂直方向重复

no-repeat

不重复

background-origin

背景的定位的原点

  • content-box
  • padding-box
  • border-box

background-attachment

背景是否固定

  • fixd 在视口中固定
  • scroll 随着页面滚动

background

是背景的简写属性，所有背景的相关样式都可以在background中设置，基本并且没有顺序要求
特殊情况下
先写clip，再写origin
先写position，再写size