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