笔记标题｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 **15** 天 HTML

这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

HTML | 青训营笔记

MDN上的CS

CSS 的背景样式

CSS background 属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。

.box {
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
  url(big-star.png) center no-repeat, rebeccapurple;
}
复制代码

Copy to Clipboard

在本教程的后面部分，我们将返回到简写的工作方式，但是首先，我们通过分开使用各个普通背景属性的方式，看一下在 CSS 中使用背景可以做哪些不同的事情。

背景颜色

background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。

在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading 和<span>元素。

尝试修改为任何可用的值。

背景图片

background-image 属性允许在元素的背景中显示图像。在下面的例子中，我们有两个方框——一个是比方框大的背景图像，另一个是星星的小图像。

这个例子演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个 background-color 属性，看看效果如何。

控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是：

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

在下面的示例中尝试这些值。我们已经将值设置为 no-repeat，因此您将只能看到一个星星。尝试不同的值—repeat-x 和 repeat-y—看看它们的效果如何。

调整背景图像的大小

在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字：

cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

在下面的例子中，我使用了上面例子中的大图，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。

试试下面：

改变用于修改背景大小的长度单位。
去掉长度单位，看看使用background-size: cover or background-size: contain会发生什么。
如果您的图像小于盒子，您可以更改 background-repeat 的值来重复图像。

背景图像定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。

备注： 默认的背景位置值是 (0,0)。

最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。

你可以使用像top和right这样的关键字 (在 background-image 页面上查找其他的关键字):

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
复制代码

Copy to Clipboard

或者使用长度值和百分比：

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
复制代码

Copy to Clipboard

你也可以混合使用关键字，长度值以及百分比，例如：

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}
复制代码

Copy to Clipboard

最后，您还可以使用 4-value 语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景从顶部调整 20px，从右侧调整 10px:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
复制代码

Copy to Clipboard

使用下面的示例来处理这些值并在框内移动星星。

备注： background-position 是 background-position-x 和 background-position-y 的简写，它们允许您分别设置不同的坐标轴的值。

渐变背景

当渐变用于背景时，也可以使用像图像一样的 background-image 属性设置。

您可以在 MDN 的 <gradient> 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用 web 上可用的许多 CSS 渐变生成器之一，比如这个。您可以创建一个渐变，然后复制并粘贴生成它的源代码。

在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性梯度，它延伸到整个盒子上，还有一个径向梯度，它有一个固定的大小，因此会重复。

不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 image1 的 background-repeat 值将是 no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。

我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。

作者：笨鱼fly
链接：juejin.cn/post/719038…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

笔记标题 ｜ 青训营笔记

MDN上的CS

背景颜色

背景图片

控制背景平铺

调整背景图像的大小

背景图像定位

渐变背景

多个背景图像

笔记标题｜青训营笔记