共计 2493 个字符，预计需要花费 7 分钟才能阅读完成。
咱们学习 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/vide…
