资讯专栏INFORMATION COLUMN

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

Tonny / 2641人阅读

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

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

在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-repeatbackground-position属性控制元素如何填充,是否重复。

背景图重复填充

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

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

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

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%。

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

我们可以使用关键字值toprightbottomleftcenter,或者以像素、百分比等长度单位设置background-position值。

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

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

背景图简写值

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

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

接下来的例子中,我们将使用background属性,设置一个包含background-colorbackground-imagebackground-positionbackground-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;
}

练习

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

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

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

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

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