zoukankan      html  css  js  c++  java
  • 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编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。
  • 相关阅读:
    oracle锁表查询,资源占用,连接会话,低效SQL等性能检查
    oracle临时表
    oracle列转行
    oracle数据库查询重复记录
    查找mysql的cnf文件位置
    Nginx反向代理,负载均衡,redis session共享,keepalived高可用
    Linux 软件安装
    Linux上网设置
    c#学习内容
    PHP八大设计模式
  • 原文地址:https://www.cnblogs.com/dingyuanxin/p/3773057.html
Copyright © 2011-2022 走看看