本篇博客介绍一些背景相关的样式。

透明背景

我们可以使用opacity样式来设置元素背景的透明。
它需要一个0~1的值，0表示完全透明，1表示完全不透明。
该样式在IE8及以下浏览器中不支持；IE8及以下浏览器中需使用filter样式代替。
filter: alpha(opacity=50);这里需要一个0~100的值，0表示完全透明，100表示完全不透明。
下面看一个具体的演示：

背景样式

使用background-image来设置背景图片，使用语法：background-image: url(图片的相对路径);

如果背景图片大于元素，默认会显示图片的左上角。

如果背景图片和元素一样大，则会将背景图片全部显示。

如果背景图片小于元素大小，会默认将背景图片平铺以充满元素。

可以同时为一个目标指定背景颜色和背景图片；背景颜色将会作为背景图片的底色。一般情况下设置背景图片时，都会同时指定一个背景颜色。
我们还可以使用background-repeat用来设置背景图片的重复方式。可选值为：repeat（默认值，背景图片会双方向重复（平铺））、no-repeat（背景图片不会重复，有多大显示多大）、repeat-x（背景图片沿水平方向重复）、repeat-y（背景图片沿垂直方向重复）。
首先，我们来看一下no-repeat（不重复）：

我们再来看一下，repear-x（沿水平方向重复）：

最后，我们来看一下repeat-y（沿垂直方向重复）：
我们知道背景图片会默认贴着元素左上角显示，我们可以通过background-position属性调整背景图片在元素中的位置。该属性可以使用top、right、left、bottom、center中的两个值来指定一个背景图片的位置，语法为：background-position: xxx xxx;。也可以直接指定两个偏移量，语法：background: xpx ypx;。第一个值为水平偏移量，为正则向右移动，为负则向左移动；第二个值为垂直偏移量，为正则向下移动，为负则向上移动。
我们来看一下两种用法，首先来看一下指定方位的用法：

我们再来看一下指定偏移量的用法。
我们还可以使用background-attachment来设置背景图片时候跟随页面一起滚动。可选值：scroll（默认值，背景图片随着窗口滚动）、fixed（背景图片会固定在某一位置，不随页面滚动）。
当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器窗口。
不随浏览器滚动的图片，我们一般设置给body，而不设置给其他元素，如果设置给其他元素，当该元素滚没的时候，图片也会消失。
首先我们来看一下不随页面滚动的情况：

我们再来看一下将不随窗口滚动的图片设置给非body元素的情况：
下面我们看一段代码：

可以看到，上面的代码是相当麻烦的，设置背景相关样式使用了6个样式，有没有什么简单的办法呢？既然这么说了，当然是有的，CSS中提供了background样式，通过该属性可以同时设置所有背景相关的样式。用法如下：

这些样式值之间没有顺序要求，谁在前谁在后都行，也没有数量的要求，不写的样式就使用默认值。

按钮练习

我们需要实现一个功能，在页面上显示一张图片，鼠标移入后变成另一张图片，点击之后再变成其他图片。

下面看代码：

眼尖的同学可能发现了，这个有点问题，在鼠标第一次移入的时候，会出现短暂的空白。这个短暂的空白会造成一次不佳的用户体验。

问题原因：

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求；
但是我们外部资源并不是同时加载的，浏览器会在资源被使用才去加载资源；
在这个场景，一上来，浏览器只会加载link状态下的图片，由于hover和active状态没有马上触发，所以hover状态和active状态下的图片并不是立即加载的，当hover状态被触发的时候，浏览器才会去加载hover状态下的图片，由于图片加载需要一定的时间，所以在加载和显示的过程中会有短暂的空白，这就是浏览器在加载照片带来的延迟。

解决问题的办法也很简单，我们可以将三张图片一起加载进来就不会有这个问题了，如何将三张图片同时加载进来呢，这就要用到CSS雪碧图了。

雪碧图制作

CSS雪碧图即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
CSS雪碧图基本原理是把网站上用到的一些图片整合到一张单独的图片上，从而减少网站的HTTP请求数量。