html css background背景样式实例讲解

背景图片 如果背景图片小于当前的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;