1、前言

今天笔记的内容是：

• 有关 CSS 背景的样式设置

2、背景样式

通过 CSS 背景属性，可以为页面元素添加背景样式。

常见的背景样式有背景颜色、背景图片、背景平铺、背景图片位置以及背景固定等内容。

✨背景颜色

一般的，页面元素的颜色默认为透明的（transparent），我们可以通过background-color属性可以定义元素的背景颜色。

举个例子：

效果如下：

🪄背景图片

background-image属性描述了元素的背景图像。在实际开发中，会将一些 logo 之类的图片设置为背景。这种方式的优点在于容易控制图片位置。

语法为：

默认情况下是没有背景图片的，即background-image: none

🌱背景平铺

需要注意的是，当我们设置背景图像后，默认情况下背景图片是平铺的。

比如：

效果如下：

因此，我们可以通过background-repeat属性的不同取值来设置图像如何平铺或者不平铺。具体看下表：

• repeat：背景平铺（默认情况下就是平铺的）

• no-repeat：背景不平铺

• repeat-x：背景沿着 x 轴平铺

• repeat-y：背景沿着 y 轴平铺

就举一个例子：

效果如下：

🌳背景位置

通过background-position属性可以设置图像在背景中的位置。

语法为：

需要注意到，这里的x坐标和y坐标可以是方位名词也可以是精确单位。

具体如下所示：

• 方位名词：top、center、bottom、left、right，分别对应上、中、下、左、右

• 精确单位：由浮点数加上单位标识符组成，比如20px
  

需要注意的是：

• 当指定的x、y坐标都是方位名词时，两个值的前后顺序无关，比如top center和center top的效果一样；

• 当background-position只有一个取值为方位名词，则默认另一个值为居中对齐；

• 当参数取值为精确单位时，如果只有一个值，则该值一定表示x的坐标，此时y坐标默认居中对齐;

• 当background-position取值是方位名词和精确单位混合使用时，则第一个值表示x坐标，第二个值表示y坐标

🔋背景附着

通过background-attachment属性可以设置背景图像是否固定或者随页面其余部分滚动。（可制作视差滚动效果）

background-attachment属性有两个取值，具体如下所示：

• scroll：无固定，背景图像随着对象内容滚动

• fixed ：背景图像固定

💡复合简写

在上述代码中，可以看到背景设置的代码量较多。为了简化背景属性的代码量，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。

当使用简写属性background时，约定顺序如下：

background: 颜色 图片地址 是否平铺 滚动效果 图片位置

这也是开发中提倡的写法。

举个例子：

上述 CSS 代码可以简写为：

总的来说，使用简写属性background时，属性值的顺序为：

1. background-color
   

2. background-image
   

3. background-repeat
   

4. background-attachment
   

5. background-position
   

备注：属性值不写全，缺失一两项也可以，顺序别换就行。

📌属性总结

好了，最后总结一下：

• background-color：可以填颜色名称 / 十六进制 / RGB代码，表示背景颜色

• background-image：填url( 图片地址 )，表示背景图片

• background-repeat：可以填repeat / no-repeat / repeat-x / repeat-y，表示背景平铺

• background-attachment：可以填scroll / fixed，表示背景附着

• background-position：可以填方位名词 / 精确单位，表示背景位置

3、写在最后

好了，今天的笔记就到这里。