CSS背景图片

背景图片：

• emmet语法简写：bgi
• 完整写法background-image
• 默认值none，没有，也可以url(路径)来定义背景图
• 背景图常用于logo图，背景图，小图标之类的地方
• 优点特别灵活，非常控制位置
• 背景图片在背景颜色的上层，可以同时存在

插入图片背景：

body{
            background-image: url(https://blog.zmkj.website/wp-content/uploads/2022/11/be668d3e14001126-300x300.png);
        }

我们插入背景图片后会发现，我们即使只有一点点打的图片，却会满屏都显示这个图片，这个我们叫做背景平铺

• 背景平铺完整写法：background-repeat :属性值;
• 属性值有：repeat、no-repeat、repeat-x、repeat-y，意思分别是平铺、不平铺、x轴平铺、y平铺
• 默认值为：repeat

当我们把它设置为不平铺之后，就会只会显示一遍这个图片了，但是我们图片默认在左上角，因为我们背景图片是非常灵活，容易控制的，那么我们背景图片还有一个功能，那就是随意改变背景图片位置。

背景图片位置：

• 背景图片位置background-position : x y;
• 属性值可以为xy坐标，也可以为方位名词，也可以百分比

方位名词

1. 如果是方位名词，那么两个值无先后顺序，比如

   background-position : left top;
   和
   background-position : top left;

   都是表示左上的意思，效果是一样的

2. 如果只写了一个方位名词，那么第二个方位名词会默认为居中。

坐标值

1. 如果我们需要精确的定位距离左边10px，距离上面20px可以写为

   background-position : 10px 20px;

2. 如果是只写了一个坐标值，那么这个值一定是x值，且y值垂直居中

混合单位

1. 混合写的时候也要遵循第一个值一定是x轴第二个一定是y值，例子：

   background-position : 10px center;

背景图附着

固定在屏幕中某个位置

• 完整写法background -attachment : 属性值;
• 属性值scroll（随着内容滚动而滚动，默认）、fixed（背景图像固定）

背景复合写法

背景复合写法一般顺序为 background :背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;