Backgrounds

什么是背景？

元素的背景是位于元素内容，填充和边框下方的区域。 默认情况下，无论如何，这是这种情况 - 在较新的浏览器中，您可以更改背景区域，使用 clip"title ="技术审查完成"> background-clip 属性(请参阅 CSS / Introduction_to_CSS / Box_model#Background_clip"> CSS框模型文章background-clip coverage 了解详情)。

背景不会位于边缘下方 - 边缘不会被视为元素区域的一部分，而是元素外部的区域。

还有许多其他不同的属性，你可以用来操纵元素的背景，其中一些我们已经在我们的课程中已经看到了很多次:

• background-color: Sets a solid color for the background.
• background-image: Specifies a background image to appear in the background of the element. This can be a static file, or a generated gradient.
• background-position: Specifies the position that the background should appear inside the element background.
• background-repeat: Specifies whether the background should be repeated (tiled) or not.
• background-attachment: Specifies the behaviour of an element's background when its content scrolls, e.g. does it scroll with the content, or is it fixed?
• background: Shorthand for specifying the above five properties on one line.
• background-size: Allows a background image to be resized dynamically

在本文的其余部分，我们将详细介绍如何使用这些功能。

基本知识:颜色，图像，位置，重复

让我们来探讨一个简单的例子来展示四个最基本的属性如何工作 - 你会在处理背景时使用这些属性。

背景颜色

您将使用 ，通过颜色值或关键字transparent。"> background-color 属性:

• For a start, the default background color of most elements is not white (as you might expect) but transparent — therefore if you set an element's background color to something interesting, but want its child elements to be white, you'll have to set that explicitly.
• In addition, it is important to set a background color as a fallback. Background colors are supported pretty much everywhere, whereas more exotic features such as background gradients are supported only in newer browsers, plus a background image might fail to load for some reason. It is therefore a good idea to set a basic background color as well as specifying such features, so the element's content is readable no matter what.

让我们从建立一个例子开始。 我们将从一些简单的HTML开始:

<p>Exciting box!</p>

让我们给它一个背景颜色:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
}

结果如下:

背景图

图像是在堆叠上下文层之上绘制的，第一层指定的图像被绘制为最接近用户。"> background-image 属性指定背景图像 显示在元素的背景中。 此属性的最简单用法是使用 url()函数 - 它将图像的路径作为参数 - 提取要插入的静态图像文件。 让我们在上面的例子中添加一个背景图片:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

结果如下:

这看起来不太好 - 默认情况下，图像在水平和垂直方向重复。 我们可以使用 背景图片可以沿着水平轴，垂直轴，两个轴重复，或根本不重复。"> background-repeat ，我们接下来看看。

需要记住的一个重要的事情是，由于背景图像使用CSS设置并出现在内容的背景中，所以它们对于诸如屏幕阅读器的辅助技术将是不可见的。 它们不是内容图片 - 它们只是用于装饰 - 如果您要在页面上包含作为内容一部分的图片，则应该使用 / zh-CN / docs / Web / HTML / Element / img"title ="HTML img元素表示文档中的图像。>> < img> 元素。

背景重复

沿水平轴，垂直轴，两个轴重复，或根本不重复。"> background-repeat 允许您指定背景图像的重复方式。 默认值为 repeat ，如上所述，使图像不断重复，直到整个元素背景填满。 这不是我们想要的在这种情况下(虽然它可能在一些情况下，例如 .html"class ="external"> repeating-background.html )。 其他常见和广泛支持的值是:

• no-repeat: The image will not repeat at all: it will only be shown once.
• repeat-x: The image will repeat horizontally all the way across the background.
• repeat-y: The image will repeat vertically all the way down the background.

让我们修复我们的例子:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

结果如下:

这当然看起来更好，但图像的定位是关闭 - 它当前重叠的文本。 我们需要把它放在一个更好的地方。

背景位置

background-position a>允许我们将背景图像放置在背景中的任何位置。 通常，属性将采用两个值，这两个值由空格分隔，这两个值指定图像的水平(x)和垂直(y)坐标，即图像的左上角。 将背景视为图形，x坐标从左到右穿过，y坐标从上到下。

该属性可以接受许多不同的值类型; 您最常使用的是:

• Absolute values like pixels, for example background-position: 200px 25px.
• Relative values like rems, for example background-position: 20rem 2.5rem.
• Percentages, for example background-position: 90% 25%.
• Keywords, for example background-position: right center. These two values are intuitive, and can take values of left, center, right, and top, center, bottom, respectively.

您应该注意，您可以混合和匹配这些值，例如 background-position:99％center 。 还要注意，如果只指定一个值，则该值将被假定为水平值，垂直值将默认为 center 。

让我们修正我们的例子:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

结果如下:

背景图像:渐变

还有另一组可用的值 背景图像一个元素的图像，这些图像是在堆叠的上下文层之上绘制的，第一个图层被绘制为最接近用户。"> background-image > - 颜色渐变，它们是背景上的平滑颜色过渡。 动态生成的梯度作为一个特征被引入，因为在网页设计中使用渐变是如此受欢迎，但使用背景图像实现渐变是相当不灵活。 目前有两种类型的梯度 - 线性梯度(从一条直线到另一条线)和径向梯度(从单个点辐射出来)。

在本文中，我们将仅关注第一种类型，第二种类型稍微复杂一点，而且不常用。 您可以在文章末尾的链接中找到更多关于这两者的信息。

线性渐变是通过将 linear-gradient()函数作为 CSS / background-image"title ="CSS background-image属性为一个元素设置一个或多个背景图像，这些图像是在堆叠的上下文层上绘制的，第一个图层被绘制为最接近 给用户。"> background-image 属性。 该函数至少需要以逗号分隔三个参数 - 渐变应该跨越背景的方向，开始处的颜色和结束处的颜色。 例如:

background-image: linear-gradient(to bottom, orange, yellow);

该梯度将从顶部到底部，从顶部以橙色开始，并且在底部平滑地转变为黄色。 您可以使用关键字指定方向(到底部，到右，到右下等) > 0deg 相当于顶部， 90deg 等效于到右边，最多到 360deg 代码>到顶部)。

您还可以沿着颜色定义的渐变指定其他点(这些点称为颜色停止)，浏览器将找出每个设置的颜色停止点之间的颜色渐变。 例如:

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

这个梯度将从顶部到底部，从黄色开始，沿着元素向下渐变至橙色的40％，然后在100％处回到黄色。 您可以根据需要指定多个停止点，也可以使用其他单位(例如 rem ， px 等)指定停止点的位置。

让我们在示例中添加一个线性渐变:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
  background-repeat: no-repeat;
  background-position: 99% center;
}

结果如下:

请注意，您还可以使用 repeating-linear-gradient()函数设置重复线性渐变。 这完全相同的方式工作，除了你设置的模式重复一遍又一遍，直到背景的边缘。 例如:

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

这将创建一个渐变，渐变从黄色到橙色，再沿着渐变每50像素回来。

背景附件

我们可用于背景的另一个选项是指定当内容滚动时它们如何滚动。 这是使用 属性确定图片的位置是否固定在视口内，或者随其包含的块一起滚动。"> background-attachment 属性可以采用以下值:

• scroll: This fixes the background to the page viewport, so it will scroll as the page scrolls. Note we said viewport, not element — if you scroll the actual element the background is set on, not the page, the background won't scroll.
• fixed: This fixes the background in position on the page, so it won't scroll as the page scrolls — it will stay in exactly the same position whether you scroll the page or the element the background is set on.
• local: This value was added later on (it is only support in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the bacground scrolls with it.

图片的位置固定在视口中，或者随着其包含的块一起滚动。"> background-attachment 属性只有在有内容要滚动时才有效果，因此我们 演示来演示三个值之间的差异 - 请查看 external"> background-attachment.html (也 >见这里的源代码)。

背景速记

可以使用 / CSS / background"title ="背景CSS属性是用于在样式表中的单个位置设置单个背景值的缩写。背景可用于设置以下值中的一个或多个:background-clip，background- 颜色，背景图像，背景原点，背景位置，背景重复，背景大小和背景附件。"> background 属性。 为此，您使用与单个属性中相同的值，但是将它们全部放在由空格分隔的一行上，如下所示:

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

未在缩写中指定的任何属性将被分配默认属性。 您可以查看 背景可以用于设置背景剪辑，背景颜色，背景图像，背景原点，背景位置，背景重复，背景尺寸和背景颜色中的一个或多个的值。 background-attachment。"> background 参考页，以了解这些默认值是什么，以及其他属性可以包含在 background 速记中。

让我们回到我们激动人心的框例子，并用速记替换现有的属性。 我们可以替换所有这些属性:

background-color: yellow;
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-repeat: no-repeat;
background-position: 99% center;

有了这个:

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

最终代码如下所示:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

结果如下:

多个背景

最近(从Internet Explorer 9开始)，我们已经能够将多个背景附加到单个元素。 这是一件好事，因为多个背景是非常有用的。 您用逗号分隔不同的背景定义:

background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;              

和背景是堆叠在一起的顶部，第一个出现在顶部，然后第二个在它下面，然后第三个，这可能不是你的期望，所以小心。 还要注意，我们已将后备背景颜色放入单独的属性声明，因为尝试将其包含在多个背景中似乎打破了东西。

您还可以将多个值放入longhand background - * 属性中，例如:

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

虽然你可能最好使用背景速记 - 不仅是更快的写，但更容易看到哪些背景属性适用于哪些背景。

在多个背景可用之前，Web开发人员必须将多个 或HTML文档分割元素)是流内容的通用容器，它不会固有地表示任何东西。它可以用于将元素分组用于样式目的(使用类或id属性)，或者因为它们共享属性值，例如lang 。只有当没有其他语义元素(例如article或nav)适当时，才应使用它们。"> < div> 元素，然后将单独的背景图片 每:

<div class="background1">
  <div class="background2">
    <div class="background3">
      <p>My content</p>
    </div>
  </div>
</div>

这工作，但它导致了相当杂乱的难以阅读的标记。 如果您需要支持旧版本的Internet Explorer，则可能仍需执行此操作。

让我们将多个背景放到我们激动人心的盒子示例 - 我们想要看到渐变和火球，在同一时间:

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

这给我们以下结果:

背景尺寸

正如我们前面提到的，有一个属性可用 - 背景图像的大小，图像的大小可以完全约束或只是部分以保持其内在比率。"> background-size - 允许您动态更改 背景图像的大小，以便它更适合您的设计。 这在许多方面非常有用，例如自动更正未正确上传的图标的大小。 请记住，这不是Internet Explorer版本低于9，所以你不能依赖它，如果你需要支持旧的浏览器。 对于每个背景图像，您需要包括两个背景尺寸值 - 一个用于水平尺寸，一个用于垂直尺寸:

background-image: url(myimage.png);
background-size: 16px 16px;

您可以使用所有期望的长度单位，以便指定所需的值 - px ，百分比， rem 等。

您可以在包含链接上的图标中看到一个使用的 background-size 示例。

主动学习:使用背景

这个积极的学习会议也没有正确的答案 - 在这里我们希望你玩背景和有一些乐趣，你继续前。 你可以:

• Set a different background color.
• Include a different background image — find an absolute path to an image to use inside the url() function.
• Apply a background gradient.
• Apply multiple backgrounds.
• Include a background-size property to alter the size of your background images.

如果您作为课程或学习小组的一部分关注此事，您的老师或导师也可能会为您完成一些额外的任务。

如果发生错误，您可以随时使用重置按钮重置。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>Exciting box!</p>
  </textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
    font-family: sans-serif;
    padding: 20px;
    /* background properties */
    background-color: yellow;
    background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
                linear-gradient(to bottom, yellow, #dddd00 50%, orange); }</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

概要

这篇文章应该教你大部分你需要知道的样式元素背景。 希望你会有一些乐趣在路上太！ 在下一篇文章中，我们将使用边框，并看看如何风格。

也可以看看

• CSS Linear Gradients
• CSS3 Radial Gradients