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

时间  2019-11-09
标签 html&css html css lesson7 lesson 设置 背景 渐变 栏目 CSS 繁體版
原文   原文链接

背景对网站的设计有重大的影响。它有利于创建网站的总体感受，设置分组，分配优先级，对网站的可用性也有至关大的影响。css

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

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

添加背景色

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

div {
background-color: #b2b2b2;
}

添加背景色时，有好几种值供咱们使用。和其余颜色属性同样，咱们能够从关键字值，十六进制值以及RGB,RGBa,HSL和HSLa值中选择。咱们最经常使用的仍是十六进制值，不过有时咱们会须要RGBa或者HSLa设置透明的背景。web

透明背景segmentfault

由于不是全部浏览器都兼容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()函数中。app

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%，表示背景图位于元素的右下角。

clipboard.png

使用像素值也很是的常见，由于像素值能够精确的控制背景图显示的位置。

背景图简写值

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

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

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;
}

clipboard.png

练习

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

  • 首先咱们在现有的color和font属性下为<body>元素增长一个蓝色背景。修改后样式以下所示：
body {
  background: #293f50;
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
  • 如今咱们已为<body>添加了蓝色背景。虽然咱们还会为网站添加一些不一样的背景色，但蓝色是其主色调。
  • 目前网站的每一个页面都拥有了蓝色背景，如今咱们须要调整一些区域的样式以保证蓝色背景下内容清晰可见。具体来讲，咱们的 <header>和<footer>将保留蓝色背景，导航模块也是。
  • 在<header>和<footer>中咱们将连接的默认色设置为白色，hover时的效果设置为与标题一致的绿色。
  • 从<header>元素开始，咱们为其添加一个class primary-header(除了现有的container和group)。别忘了将这个class添加到全部页面的<header>元素中。
<header class="primary-header container group">
  ...
</header>
  • 使用<header>中的class primary-header和<footer>中的primary-footer，咱们就能为其中的连接添加新的样式。
  • 咱们选中拥有class primary-header 或 primary-footer的元素中的<a>元素，将它们的颜色设置为白色；两组选择器用逗号隔开以共享样式。再次咱们选中相同的<a>元素将它们hover时的颜色设置为绿色。
.primary-header a,
.primary-footer a {
  color: #fff;
}
.primary-header a:hover,
.primary-footer a:hover {
  color: #648880;
}
  • 咱们将一些文本颜色设为白色后，也须要将导航模块的的文本颜色设置为白色，它目前也是蓝色背景。咱们在现有的hero选择器中，添加color属性为白色。修改后代码以下所示：
.hero {
  color: #fff;
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}
  • 咱们须要清理导航模块中的一些按钮样式。 咱们将这部分新的样式添加到main.css文件下的按钮模块中的btn选择器上。
  • 具体的来讲咱们要将按钮的文本颜色color设置为白色。确保光标cursor始终是一个指针pointer,增大font-weight值，缩小letter-spacing，改变text-transform为uppercase
  • 修改后样式以下所示：
.btn {
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  letter-spacing: .5px;
  margin: 0;
  text-transform: uppercase;
}
  • 接下来咱们经过btn-alt选择器整理一些备用按钮的样式。具体来讲，咱们要确保按钮的边框为白色；hover时的背景色为白色，文本为蓝色。
.btn-alt {
  border: 1px solid #fff;
  padding: 10px 30px;
}
.btn-alt:hover {
  background: #fff;
  color: #648880;
}
  • 如今咱们对全部拥有蓝色背景区域的样式作了整理，接下来咱们为白色背景的区域添加一些样式。在main.css文件中的clearfix区块下，划分一个rows区块，在这个新的区块下添加选择器row
  • 在row选择器中，咱们为其添加一个白色背景，一个最小宽min-width值960px(确保row元素的宽度老是大于container或grid元素)和一些纵向的padding。完成后代码以下所示：
/*
  ========================================
  Rows
  ========================================
*/

.row {
  background: #fff;
  min-width: 960px;
  padding: 66px 0 44px 0;
}
  • class row就绪以后，咱们就能够在主页的导航中使用它了。目前，该区块有一个class为grid的<section>，包含了三个class为teaser和col-1-3的<section>。
  • 咱们要为这区块添加一个白色背景，将全部元素包含在class为row的元素中。
  • 因为咱们想要将整个导航区块放置在<section>元素中，咱们将新建一个class为row的<section>元素去包裹现有的class为grid的<section>
  • 用两个<section>去包裹相同的内容下降了语义化，因此咱们将第二个<sectoin>，class为grid的元素改成<div>元素，调整以后，这个元素就只剩下一个样式，再也不具备语义。
  • 导航调整后新结构以下所示：
<section class="row">
  <div class="grid">

    <!-- Speakers -->
    
    <section class="teaser col-1-3">
      ...
    </section><!--
    
    Schedule
  
    --><section class="teaser col-1-3">
      ...
    </section><!--
    
    Venue
    
    --><section class="teaser col-1-3">
      ...
    </section>

  </div>
</section>

一点背景的改变就能够影响网站的设计，简直太神了。从主页上看，咱们的样式研讨会网站已经很不错了。
clipboard.png

设计渐变背景

渐变背景是CSS3引入的，几乎全部的设计师和前端开发都为此欣喜。虽然渐变背景不能做用于旧版浏览器，但全部最新的浏览器都支持它们。

CSS将渐变背景视为背景图。咱们能够和设置普通的背景图同样，使用background和background-image属性建立渐变背景。属性值则依赖于咱们须要建立什么样的渐变背景，例如线性渐变或放射性渐变。

渐变背景添加供应商前缀

在第四课 盒子模型 中，咱们讨论过将供应商前缀添加到新的CSS属性或值，以便浏览器可以支持它们。渐变背景的属性值就是要求添加供应商前缀的属性值之一。幸运的是目前大部分浏览器都取消了对供应商前缀的需求。但为了最大限度的支持渐变背景，仍是建议加上它。

咱们会在线性渐变中介绍不一样种类的供应商前缀，但为了简便起见，放射性渐变中咱们不会再说起。

线性渐变

多年来，设计师和开发者们都是经过切图来实现渐变背景。这个方法费时费力，并且极不灵活。幸运的是那些日子过去了，如今咱们能够经过CSS来实现须要的线性渐变背景，若是某个颜色改变了，不须要再重作，从新切图和上传。如今咱们只须要改变CSS的值就能够快速实现，完美。

div {
  background: #466368;
  background: -webkit-linear-gradient(#648880, #293f50);
  background:    -moz-linear-gradient(#648880, #293f50);
  background:         linear-gradient(#648880, #293f50);
}

clipboard.png

线性渐变背景经过在background或background-image属性中用linear-gradient()函数来定义。linear-gradient()函数必须包含两个色值，第一个值是起始的色值，第二个值是结束的色值。浏览器将会自动生成两个色值之间的渐变色

在渐变背景定义以前，咱们须要添加一个默认的纯色背景值，这个值做为不支持渐变背景的浏览器的备用色。

改变线性渐变背景的方向

默认状况下，线性渐变是由上至下渐变的，从第一个色值过分到第二个色值。但咱们能够经过在色值前加关键字来改变方向。例如咱们但愿从左到右渐变，咱们就能够经过设置关键字值to right来定义。关键字值也能够组合使用，若是咱们但愿从左上角至右下角渐变，咱们就能够经过设置关键字值to right bottom来定义。

div {
  background: #466368;
  background: linear-gradient(to right bottom, #648880, #293f50);
}

clipboard.png

若是咱们设置斜线渐变背景的元素不是一个方形元素，那么就不是直接从一个角到另外一个角渐变。相对的，它会找到元素的中心，在直角放置锚点，而后再根据值定义的值来设置渐变方向。这些角被称为“虚角”，由于它们并非实际存在的。Eric Meyer 在他的文章 线性渐变关键字 对这部分语法作了很好的概述。

除了关键字，还可使用角度值。若是咱们想要向左上角渐变，角度值设置为315deg。若是咱们想要向右下角渐变，那么角度值设置为135deg。咱们可使用0到360之间的任何角度值。

放射性渐变背景

虽然线性渐变能够完美的实现从一个方向至另外一个方向的渐变，但不少时候也须要用到放射性渐变。

放射性渐变和线性渐变的使用方法一致，同时也共享许多相同的值。但咱们须要在属性background和background-image中使用radial-gradient()函数而非linear-gradient()函数

div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);
}

clipboard.png

放射性渐变是从里到外渐变，因此radial-gradient()函数的第一个色值就是元素绝对中心的色值，第二个色值是元素外围的色值。浏览器会自动渲染两个色值间的部分。

放射性渐变和线性渐变的主要不一样之一，就是放射性渐变动加复杂和多变，咱们能够设置位置，大小，半径等，咱们将会讲一些基本的值，读者能够自行深刻探究 放射性渐变， 他们提供了比这里列举出的更增强大的功能。

CSS3 渐变背景生成器
手写CSS3渐变背景多少会以为有些困难，尤为你是个新手的话。不过好在市面上出现了一些 CSS3 渐变背景生成器。每一个生成器都有所不一样，有些提供了更多的功能选项。 若是你感兴趣的话，我建议你研究研究，找找最合适本身的生成器

渐变色结点

渐变色最少是从一个色值过渡到另外一个色值；但有些时候，咱们但愿设置多个色值以便浏览器渲染。咱们能够在函数中添加色值节点来实现，每一个色值用逗号隔开。

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
}

clipboard.png

默认状况下，每一个色值间的间距都是相等的，以过分色相连。若是但愿控制色值间的距离，能够为每一个色值结点定义一个位置属性值。位置属性值是一个长度值，须要在色值后申明。

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}

clipboard.png

除非另有定义，不然第一个色值结点的位置是0%，最后一个色值节点的位置是100%

渐变背景范例

在原先的成功信息弹窗中，把老的背景图换成线性渐变背景。

在这里咱们将会用到两次background属性，第一个background属性值使用纯色值用于兼容不支持渐变背景的浏览器。第二个background属性值使用linear-gradient()函数定义一个从上至下的绿色渐变背景。

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

.notice-success {
  background: #67b11c;
  background: linear-gradient(#72c41f, #5c9e19);
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px;
}

clipboard.png

练习

渐变背景全都介绍完了，如今让咱们在网站中使用它。

  • 咱们将在class row-alt中生成渐变背景，由于class row-alt和row用到了相同的min-width值，因此咱们将其写在一块儿
.row,
.row-alt {
  min-width: 960px;
}
  • 接下来咱们在row-alt选择器中设置一些新样式，这些新样式包含一个从左到右的绿色过渡为黄色的渐变背景。
  • 咱们在row-alt中使用background:linear-gradient()填充合适的属性值，并加上供应商前缀；同时也添加一个纯色背景值用于兼容不支持渐变背景的浏览器。
  • 最后咱们添加上纵向的padding值，代码以下所示：
.row,
.row-alt{
  min-width: 960px;
}
.row {
  background: #fff;
  padding: 66px 0 44px 0;
}
.row-alt {
   background: #cbe2c1;
   background: -webkit-linear-gradient(to right, #a1d3b0, #f6f1d3);
   background: -moz-linear-gradient(to right, #a1d3b0, #f6f1d3);
   background: linear-gradient(to right, #a1d3b0, #f6f1d3);
   padding: 44px 0 22px 0;
 }
  • 写好row-alt样式以后，咱们将其应用到分页里。目前咱们全部的分页都有一个含有class container的<section>元素。而这些<section>元素内都有一个包含页面标题的<h1>元素。
  • 咱们须要像更新主页的<section>元素同样更新这些<section>元素。咱们为每一个class为container的<section>元素包裹一个 class为row-alt的<section>元素，同时为了更好的语义话，将原有的<section>元素替换为<div>元素。
  • 更新后的页面代码以下所示：
<section class="row-alt">
  <div class="container">

    <h1>...</h1>

  </div>
</section>
  • 因为咱们正在更新分页，正好改一改它们的介绍信息和引导信息，使其更具吸引力。咱们在以前提到的<h1>元素内嵌入一个段落元素用以编写介绍信息。以speakers.html页面为例，代码以下所示：
<section class="row-alt">
  <div class="container">

    <h1>Speakers</h1>

    <p>We&#8217;re happy to welcome over twenty speakers to present on the industry&#8217;s latest technologies. Prepare for an inspiration extravaganza.</p>
  
  </div>
</section>
  • 除了添加段落元素外，咱们还能够更改一些样式。在现有的class为container的<div>元素上再添加一个classlead,能够在class为row-alt的直接子元素中找到它。修改后代码以下所示：
<section class="row-alt">
  <div class="lead container">
    
    ...

  </div>
</section>
  • 完成后，咱们将全部<div>元素中的文本设置居中对齐。同时也为每一个<div>元素中的段落元素都增大font-size和line-height设置。
  • 咱们在main.css文件中的Typography区块下划分一个Leads区块用以添加这部分样式：
/*
  ========================================
  Leads
  ========================================
*/

.lead {
  text-align: center;
}
.lead p {
  font-size: 21px;
  line-height: 33px;
}
  • 如今咱们网站分页的介绍信息上也渲染了以前设置好的渐变背景。查看下全部的分页，确保它们都更新了内容、标题和段落。

clipboard.png

演示源代码

这是练习的源代码。在线预览 或 点击下载

同时设置多张背景图

在很长一段时间内，一个元素只容许添加一张背景图，这对页面的设计增长了至关多的约束条件。幸运的是，在CSS3中，咱们可使用background或background-image属性在一个元素中添加多个背景图，这些背景图值只须要用逗号隔开。

背景图值的第一个值是渲染在最上面的背景图，最后一个值是渲染在最下面的背景图，这两个值之间的任何背景图都根据顺序渲染。如下是在<div>元素上同时使用三张背景图的示例：

div {
  background:  url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
}

上面的代码中咱们使用了简写值，同时将多个背景图值串在一块儿。这些简写值也能够都用开隔开，分别写在background-image，background-position,和background-repeat属性中。

多背景图示例

如今咱们再次回到成功信息弹窗模块，将背景图和线性渐变背景组合起来。

咱们须要将两个值都写在第二个background属性上。 第一个值咱们选择图片，第二个值选择线性渐变，两个值之间用逗号隔开。

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

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

clipboard.png

探索新的背景属性

除了渐变背景和多背景图，CSS3还引入了三个新样式属性：background-size，background-clip和background-origin。

background-size属性能让咱们控制背景图的大小，而background-clip和background-origin使咱们可以控制图片哪里须要被裁剪，须要在元素的哪一部分显示（例如在边框内显示或者在内边距内显示)。

background-size

background-size容许咱们具体定义一张背景图的大小，这个属性接受一些不一样类型的值，包括长度单位值和关键字值。

使用长度单位值时，咱们能够定义一个宽度值和一个高度值，两个值之间用空格隔开。第一个值设置图片的宽度，第二个值设置图片的高度。值得注意的是，使用百分比值的时候，这些值是根据元素的大小来渲染的，而非图片的原大小。

所以，将background-size属性值设置为100%会使背景图填充元素的宽，若是没有填写第二个值，那么图片的高度会自动根据高宽比设置。

关键字值auto表示自动根据图片的大小比例设置背景图。例如，咱们想要为元素设置一个高度占比为75%的背景图，宽度根据图片比例展现，那么咱们能够将background-size值设置为auto 75%

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-size: auto 75%;
  border: 2px dashed #9799a7;
  height: 240px;
  width: 200px;
}

clipboard.png

cover&contain

background-size除了能够设置长度单位值之外，还能够设置关键字值例如cover和contain

值cover会使图片原有比例不变的状况下，缩放至合适的大小填满整个元素的背景，因此使用cover值常常会出现图片溢出被裁剪的状况。

值contain会使图片原有比例不变的状况下，大小调整到彻底包含在元素的高宽内。与cover值不一样的是，contain所渲染的图都是完整的，但常常不能占满整个元素的背景空间。

使用cover和contain值时可能致使图片失真，好比当图片被拉升后高宽超过它们原有的大小时。因此在使用这两个值时须要注意样式是否知足需求。

background-clip & background-origin

background-clip设置图片须要覆盖的位置，background-origin设置background-position的起始位置。这两个新属性引入了三个共用的关键字值：border-box、padding-box和content-box

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-clip: padding-box;
  background-origin: border-box;
}

background-clip的默认值为border-box，表示背景图拓展至边框区域。background-origin的默认值是padding-box，表示图片的起始位置为元素的内边距

clipboard.png

border-box表示背景填充值至边框区域

clipboard.png

padding-box表示背景在内边距内填充

clipboard.png

content-box表示背景填充不包含内边距和边框区域

咱们第一次提到这三个值是盒子模型中box-sizing的属性值，它们的意义并无发生改变，但不一样属性中产生做用有所不一样。

总结

在页面中添加背景和渐变可让咱们把色彩放在设计的最前线。这些特性和功能也有助于咱们对内容进行分组，改进页面的总体布局。

重温下这节课咱们所学的内容：

  • 怎么样为元素添加背景色和背景图
  • 怎么实现CSS的线性渐变和放射性渐变
  • 怎么样在单一元素上设置多个背景图
  • CSS3容许咱们设置背景图的大小，显示区域和原点。

添加背景色，渐变背景以及背景图给予咱们很大的可能去提高网站的总体设计。接下来咱们会很快学习到怎么样在页面中添加图片(非背景图)和其余的媒体,以及怎么建立语义化列表

文章来源

https://learn.shayhowe.com/ht...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程