[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。

背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。

在CSS中，元素的背景可以是一个纯色，一张图，一个渐变色或者它们的组合。在我们决定如何实现背景之前，我们要考虑到背景是为了网站的整体布局服务的。

在这节课中，我们将会学习如何在元素上实现各类背景色，包括渐变色。同时我们也会接触到一些CSS3的背景属性。

添加背景色

给元素添加背景的最便捷方式就是使用background属性或background-color添加一个纯色背景。background属性可以接受颜色和图片为值，但background-color只接受色值。这些属性都是有效的，所以你可以根据自己的偏好还有实际场景选择：

div {
background-color: #b2b2b2;
}

添加背景色时，有好几种值供我们使用。和其他颜色属性一样，我们可以从关键字值，十六进制值以及RGB,RGBa,HSL和HSLa值中选择。我们最常用的还是十六进制值，不过有时我们会需要RGBa或者HSLa设置透明的背景。

---

透明背景

因为不是所有浏览器都兼容RGBa和HSLa，所以推荐在使用它们的时候设置一个备用色。Internet Explorer 8 就是不兼容RGBa和HSLa的浏览器之一。当浏览器（如Internet Explorer 8）遇到不能识别的值时就会忽略它。

如果担心IE8的兼容问题，那么有一个非常简单的方法添加一个备用色。我们可以利用CSS的从上到下层叠的关系，设置两个background-color属性。第一个background-color属性使用“安全的”背景色，例如十六进制值；第二个background-color使用RGBa或者HSLa值。这样浏览器如果可以识别RGBa或HSLa值，就会正确渲染它；如果无法识别，就会渲染它上面的十六进制的色值。

div {
  background-color: #b2b2b2;
  background-color: rgba(0, 0, 0, .3);
}

---

添加背景图

除了可以为图像添加背景色之外，我们也可以为其添加背景图。背景图的添加方法与背景色的添加方法类似，不过增加了一些额外的属性。与添加背景色类似，我们可以用background属性设置缩略值，也可以使用background-image属性直接设置值。但不管你使用什么属性，图片资源必须放置在url()函数中。

url()函数的值是背景图的路径，与创建超链接路径相似。我们要注意一下文件目录，确保引用的图片路径准确，路径放置在括号和双引号之间。

div {
  background-image: url("alert.png");
}

如果我们添加背景图时只使用url()值可能会出现一些不合需要的情况。默认情况下，图片会从左上角开始重复填充元素背景直到填满元素的背景。所幸我们可以使用background-repeat和background-position属性控制元素如何填充，是否重复。

背景图重复填充

默认情况下背景图会横向和纵向同时重复填充元素的背景，除非有特别声明。background-repeat属性可以用以控制图片是否重复填充，以及重复填充的方向。

div {
  background-image: url("alert.png");
  background-repeat: no-repeat;
}

background-repeat 接受四个值：repeat, repeat-x, repeat-y 和 no-repeat。repeat是默认值，表示图片会同时在横向和纵向重复填充元素背景。

repeat-x表示背景图横向重复填充元素背景，而repeat-y表示背景图纵向重复填充元素背景。no-repeat是告诉浏览器背景图只出现一次就够了，不需要重复填充。

背景定位

默认情况下，背景图位于元素的左上角，但我们可以通过background-position属性精准的控制背景图相对于该角落的位置。

div {
  background-image: url("alert.png");
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

background-position属性要求输入两个值：横向偏移量(第一个值)和纵向偏移量(第二个值)。如果只输入了一个具体值，那么这个值将应用于横向偏移，纵向偏移量会默认为50%。

因为我们是相对于左上角设置背景图偏移，所以长度值与该角息息相关。

我们可以使用关键字值top，right，bottom，left和center，或者以像素、百分比等长度单位设置background-position值。

关键字值和百分比非常相似。例如关键字值left top对应百分比值0 0，表示背景图位于元素的左上角。而关键字值right bottom对应百分比值100% 100%，表示背景图位于元素的右下角。

使用像素值也非常的常见，因为像素值可以精确的控制背景图显示的位置。

背景图简写值

background-color， background-image，background-position和background-repeat属性可以揉成一个背景属性值。这些值的顺序有多种，不过最常用的顺序是background-color，background-image，background-position最后为background-repeat

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}

背景图示例

接下来的例子中，我们将使用background属性，设置一个包含background-color，background-image，background-position和background-repeat值的简写值。

可以注意到例子中background-position属性有一个相对值和一个绝对值，第一个值20px设置的是横向偏移量，表示背景图在元素内向右偏移20像素。第二个值50%是一个纵向偏移量，表示背景图在元素内纵向居中

notice-success选择器中也设置了一些其他的样式以进一步美化警报消息的样式。

HTML

  Woo hoo! Congratulations, you did it!

CSS

.notice-success {
  background: #67b11c url("tick.png") 20px 50% no-repeat;
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;
}

练习

回到我们的“样式讨论会”网站，让我们为其添加一些背景色。在此期间，我们将修改一些样式以保持样式和内容清晰美观。

首先我们在现有的color和font属性下为元素增加一个蓝色背景。修改后样式如下所示：

body {
  background: #293f50;
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

现在我们已为添加了蓝色背景。虽然我们还会为网站添加一些不同的背景色，但蓝色是其主色调。

目前网站的每个页面都拥有了蓝色背景，现在我们需要调整一些区域的样式以保证蓝色背景下内容清晰可见。具体来说，我们的

和