背景图片

语法
background-image：
在盒子里面方图片，会显示平铺的效果

image.png

• 可选值 repeat 默认值，背景会沿着x轴 y轴双方向重复，达到充满元素这个目的，也就是铺满的效果
• repeat-x 沿着x轴方向重复
• repeat-y 沿着y轴方向重复
• no-repeat 背景图片不重复，有多大就铺多大

background-position 用来设置背景图片的位置

• 设置方式

  • top left right bottom center几个方位的词来设置
    实际上就是一个九宫格

    
    
    image.png
• 通过偏移量来指定图片的位置

  • 水平方向的偏移量
    -垂直方向的偏移量

    
    
    image.png

写个边框

image.png

image.png

• 可选值
  • border-box默认值，背景会出现在边框的下边

  • padding-box 背景不会出现在边框，只出现在内容区和内边距

    
    
    image.png
  • content-box 背景只会出现在内容区
  • padding-box 默认值，background-position从内边距处开始计算
  • conten-box背景图片的偏移量从内容区处计算

  • background-origin：背景图片的偏移量计算的原点

    
    
    image.png

** background-size：**

image.png

希望宽度把元素撑满，可以把宽高都设100%，图片就和元素一样大

• 可选值 cover 图片比例不变，将元素铺满
• contain 图片比例不变，将图片在元素中完整显示
  出现滚动条

image.png

image.png

可选值

• scroll 默认值，背景图片会跟随元素一定
• fixed 背景图片会固定在页面中，不会随元素移动

这是所有背景相关的样式

image.png

image.png

• image.png

backgound背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求,也没有哪个属性是必须写的
background-size必须写在 background- position的后边,并且使用/隔开
background-position/background-size
background- origin background-clip两个样式, orgin要在clip的前边