MDN 教程

原文地址 developer.mozilla.org

CSS 的背景样式

背景图片

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。

背景图像定位

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

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

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

渐变背景

当渐变用于背景时，也可以使用像图像一样的 background-image属性设置。
可以在 MDN 的<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。

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

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

多个背景图像

也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值。

当你这样做时，你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。

注意：渐变可以与常规的背景图像很好地混合在一起。

其它 background-*属性，该属性值用逗号分隔的方式设置。例如下列background-image：

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

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

背景附加

另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由 background-attachment属性控制的，它可以接受以下值:

• scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
• fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
• local: 这个值是后来添加的 (它只在 Internet Explorer 9 + 中受支持，而其他的在 IE4 + 中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

使用 background 的简写

正如我在本课开始时提到的，您将经常看到使用 background属性指定的背景。这种简写允许您一次设置所有不同的属性。

如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。

这里有一些规则，需要在简写背景属性时遵循，例如:

• background-color 只能在逗号之后指定。
• background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。

查看 background的 MDN 页面，以查看所有的注意事项。

背景的可访问性考虑

如果指定了一个图像，并且文本将被放置在该图像的顶部，您还应该指定一个background-color ，以便在图像未加载时文本也足够清晰。

屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是 HTML 页面的一部分，而不是包含在背景中。

边框

注意：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性 (例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 详情。

圆角

通过使用 border-radius属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。