首页 > 代码库 > CSS中background-image【CSS Sprites,base64编码】

CSS中background-image【CSS Sprites,base64编码】

CSS中,background可以设置对象的背景样式。如颜色或者使用一张图片代替,今天我要多说两句的就是使用一张图片的参数:image。准确的来说应该是background-image。我们可以这样用它:

body{
            background-image: url(... .jpg);

}
       /* 也可以直接使用background 代替 */

body{
           background: url("....jpg");

}

css显示图片分3种,第一种是单纯的显示一个图片;第二种称之为CSS Sprites,也就是说把若干小图片合成一个大图片,然后通过background的postion参数实现效果,第三种是Inline images。这个方法不适用于IE浏览器。

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里,格式是这样的:data:[<mediatype>][;base64],<data>

data:URL标签是在1995年第一次提出,按RFC2397规范的描述:它是"allows inclusion of small data items as ‘immediate‘ data.(允许在页面中包含一些小的即时数据)"。如一个内嵌的的图片可以这样引用:

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }
这段代码可以在firefox浏览器运行。这行代码的意思是,gif格式的以base64编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。