CSS Background 属性的 5 种用法

我们知道 CSS background 是用来设置元素背景的，但是它的使用上会有很多细节需要注意，否则就会出错。

CSS background 是一系列属性的合集，通过这一个属性，可以对背景进行多种操作，我们接下来看一些它的用法。

移动背景

首先是移动背景。当背景图片比较大时，我们可以对背景进行偏移来展示需要的部分。可以分别设置水平方向偏移和垂直方向偏移，单位可以是任何合法的 CSS 单位，例如像素、百分比、等等：

background: url("./background.webp") -300px -500px;

移动背景也可以利用关键字，可以设置为 top、bottom、left、right 和 center，分别是基于背景的顶部、底部、左侧、右侧对齐和居中对齐：

background: url("./background.webp") center;

或者也可以使用关键字加偏移量这种形式指定四个值。例如这里我们可以设置为距离右侧 -50px，距离底部 -100px：

background: url("./background.webp") right -50px bottom -100px;

移动背景也可以用来展示精灵图中的图标。

背景滚动

通过 background 也可以设置背景的滚动行为。当元素的内容超出容器而出现滚动条时，控制背景是否跟随滚动条进行移动。设置为 local，那么背景就会根据滚动条的滚动而滚动：

background: url("./background.webp") local;

如果设置为 scroll 或者是 fixed ，那么背景就会固定在一个位置。不同的是，Scroll 会相对于元素本身进行定位，而 fixed 是相对于 viewport，也就是浏览器进行定位的：

background: url("./background.webp") scroll;
background: url("./background.webp") fixed;

渐变背景

通过 background 也可以设置渐变背景，利用 linear-gradient 函数设置线性渐变：

background: linear-gradient(90deg, hsl(0deg, 0%, 0%), hsl(0deg, 0%, 70%));

背景尺寸

Background 还可以对背景图片进行缩放。就像是普通的 img 标签那样，可以设置为 cover、contain 或者是某个具体的缩放百分比。但是这个使用上会有一个注意事项，就是设置尺寸的属性，必须跟在设置背景偏移的属性后边，然后这两个属性使用 / 分开，例如我们这个背景设置了基于顶部对齐，然后设置缩放为 cover，这样的话，背景就会缩小到能够填满整个容器，并截掉底下超出的部分：

background: url("./background.webp") top/cover;

设置多个背景

CSS 的背景也可以设置多个。利用这样的特性我们可以对图片加上一个遮罩，或者添加多个层叠的效果。例如这里使用了一个线性渐变，设置为比较深的颜色，并给颜色加上了透明度，然后在底下加载一个背景图片，这样就对背景加上了一个深颜色的渐变的遮罩层：

background: linear-gradient(
    90deg,
    hsl(0deg, 0%, 0%, 0.7),
    hsl(0deg, 0%, 70%, 0.7)
  ), url("./background.webp") center/cover;

好了，这个就是 CSS Background 属性的使用方式以及注意事项。如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！