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

标签：style   http   ext   color   strong   使用   

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编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。

CSS中background-image【CSS Sprites，base64编码】,布布扣,bubuko.com

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

标签：style   http   ext   color   strong   使用   

原文地址：http://www.cnblogs.com/dingyuanxin/p/3773057.html