零基础教你学前端——72 CSS背景

我们学习 CSS 背景属性。

假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。

也可以给 div 加一个背景颜色。

既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。但是由于这个 div 已经被我设定了大小，图片呢，是大于这个容器的，所以实际上，我们最终看到的效果，是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。

创建一个 css-background.html 文件和一个 background-style.css 文件。接下来，我们打算给整个页面来添加背景图片。

事实上，body 元素也是一个容器，可以直接给 body 添加背景图片。body 容器默认水平方向上，是占满整个窗口的，我们来给它添加一个高度样式，定义选择器 body，声明样式 height: 100%。

CSS
body {
  height: 100%;
}

预览一下效果，按下 F12，来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度，没有高度。为什么我们设置的高度 100% 不管用呢？大家注意，这里的100%是相对于它的父元素高度的，body 元素的父元素是 html，这个元素我们并没有给它设置大小。

所以，在 body 选择器前面加一个 html 逗号 ( html, )，这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。

这时再来看一下页面，现在 body 和整个窗口就一样大了。

CSS
html, body {
  height: 100%;
}

下面我们给 body 添加背景图片，可以通过 background-image 属性实现，属性值为 url 后跟一个小括号，括号里面填写背景图片的路径 （url(./duck.gif)）。

回到样式代码，再定义一个 body 选择器，单独给它再声明样式 background-image: url(./duck.gif)。这个图片是一个动态图片。

我们来观看一下效果，为什么会出现这么多的图片呢？我明明只是加了一张背景图而已。原因是，当我们给元素添加背景图片的时候，图片是以平铺的方式来展现的。

什么是平铺呢？就是当我们放入一张背景图的时候，这个图片在默认情况下，会向四周扩散，无限的进行重复，就变成了这个样子。当然了，容器是有大小限制的，最终我们能看到的部分呢，也就这么多而已。

如果我们不希望这个背景图是重复的，需要使用一个新的背景属性 background-repeat，取值为 no-repeat。

我们来看效果，最终就只有一张动图了。

接下来我们来修改一下，将背景图片换成另外一张图片。

再来观察这个效果，由于不允许平铺，我们只看到了一张图片。

把 background-repeat 属性值 no-repeat 改为 repeat。

我们就看到了这样的效果。

在平时开发的时候，给一个网页或一个比较大的容器设置背景，经常会采用这样的技巧，放一个小的图片进去，只需要让它保持平铺的方式，我就会得到一张无限大的图。

再回到刚才的例子。如果要求这个背景图片在页面中间显示，我们如何调整背景图的位置呢？

我们需要使用 background-position 属性，这个属性需要写两个值：第一个值表示在水平方向上的对齐方式——left，center，right。第二个值表示在垂直方向上的对齐方式——top，center ，bottom。

给 body 添加样式 background-position: center center，也就是水平垂直居中。

大家发现，图片移到了页面的中间。如果将图片放到右下角，属性值该如何设置呢？把答案写到公屏上吧。

回到 html 代码，添加一个 h1 元素和五个 p 元素，填入一些文本。再复制五份。

再回到 css 代码，背景图恢复为 bg.png，图片平铺方式为 repeat。

我们看一下效果，可以通过滚动条来查看网页内容，仔细观察，文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先脑补一下效果。

实现这个效果，需要使用 background-attachment 属性，用来声明容器里的背景图片与内容的依附方式。值 fixed：图片固定，值 scroll：同时滚动。

给 body 选择器添加样式 background-attachment

[??t?t?m?nt] : fixed。

再看一下效果，滚动一下页面，背景固定的效果实现了！

前面我们多次使用到了 background-color 属性，它可以给容器设置背景颜色，值可以设置为颜色名称，十六进制颜色值，RGB颜色值等等。

把背景图片的样式注释掉，添加 background-color 属性，值为 green。

此时，整个页面背景为绿色！颜色有点深，可以让绿色变的浅一些吗？

你能想到的方法应该是换一个其他的颜色值，其实，我们可以通过让背景透明一些，同样可以实现这个效果。

这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值，a 是 alpha 的简写，表示通过设置一个 alpha 通道，来指定颜色的不透明度，是一个介于 0 到 1 的数字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的颜色就是黑色半透明。

把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。

我们看，页面绿色的背景因为透明，颜色变浅了！

为了缩短代码，也可以使用单一的 background 来指定所有的背景属性。

可以把 body 的全部背景属性，合并在一个 background 属性里。注释所有代码，声明属性 background，值可以写为：颜色值 rgba(0, 255, 0, 0.1)， 背景图片 url(./duck.gif)，平铺方式 no-repeat，背景图位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）

我们看，一句声明，实现了全部的背景效果！

文章配套视频链接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75