html的背景样式图片

背景图片 如果背景图片小于当前的div的情况下

默认的是将平铺充满元素

background-image 设置背景图片。

background-repeat 设置是否及如何重复背景图片。

repeat 默认的是都重复

repeat-x 背景图像在水平方向重复
    repeat-y 背景图片在垂直方向重复
    no-repeat 背景图片仅仅显示一次。

background-position 设置背景图像的开始位置。

可能的值为： top left               x%  y% 设置背景图片的在元素中的位置

top  center

top  right
                
                center left

center center

center right

bottom left

bottom center

bottom right

该属性 可以使用  top center bottom left right  中的两个值指定背景图片的位置。

一个值 默认第二个值为center

background-position:100px 100px;

background-attachment: 设置背景图片是否固定或者随着页面的其余部分滚动。

scroll 默认值。背景图片会随着页面其余部分的滚动而滚动。

fixed 当页面的其余部分滚动时，背景图像不会滚动。

当背景图片的background-attachment 为 fixed  背景图片的定位永远相当于浏览器的窗口

多个图片进行加载的时候，最好通过ps放到同一张图片中

做完功能后，第一次切换图片时，会发现图片有个快的闪烁
这个闪烁造成一次不佳的用户体验。
产生问题的原因。
    背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源
    就需要单独的发送一次请求。外部资源不是同时记载的。当资源使用的时候
    才会去加载资源。

.btn:link{
    display:block;
    width:93px;
    height:29px;
    background-image:url(img/btn/link.png);
    /*设置背景图片不重复*/
    background-repeat:not-repeat;
}

.btn:hover{
    background-image:url(img/btn/hover.png);
}

.btn.active{
    background-image:url(img/btn/active.png);
}

为了解决这个问题，整合为一张图片，可以同时将三张图片一起加载，就不会出现闪烁的问题。

然后通过background-position:切换要显示切换图片的位置;

图片整合技术  CSS-Sprite

使用三张图片会出现这种情况，
把三种情况的图片放到一个图片里面

background-position:-50px 0;

background-position:-100px 0;

总结 ： 通过一个样式的属性设置

background:#bfa url(img/3.png) center center no-repeat fixed;