美文网首页
插入图片新方式:data:image

插入图片新方式:data:image

作者: mixj93 | 来源:发表于2016-03-08 15:47 被阅读4009次

    我们在使用<img>标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上。对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。
    使用data:image的例子
    使用普通图片文件的例子
    具体的区别可以打开浏览器开发者工具观察页面加载时HTTP请求。

    • 如何使用
      • CSS
    p {
        background: url(data:image/gif;base64,R0lGOD......jIQA7) //外部图片:url(fakepath/image.gif)
        no-repeat left center; 
        padding: 5px 0 5px 25px;
    }
    
    * HTML
    
    <img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" /> <!-- 外部图片:src="fakepath/image.gif" -->
    
    * 语法总结
    
    data:[<mime type>][;charset=<charset>][;base64],<encoded data>
    
    * data的一些类型:
        * data:,<文本数据> 
        * data:text/plain,<文本数据> 
        * data:text/html,<HTML代码> 
        * data:text/html;base64,<base64编码的HTML代码> 
        * data:text/css,<CSS代码> 
        * data:text/css;base64,<base64编码的CSS代码> 
        * data:text/javascript,<Javascript代码> 
        * data:text/javascript;base64,<base64编码的Javascript代码> 
        * data:image/gif;base64,base64编码的gif图片数据 
        * data:image/png;base64,base64编码的png图片数据 
        * data:image/jpeg;base64,base64编码的jpeg图片数据 
        * data:image/x-icon;base64,base64编码的icon图片数据 
    
    <!--[if lt IE 8]>
        ...... IE7及以下内容 ......
    <![endif]-->
    
        * CSS Hack
    
    *background-image:url(sprite.png); /* Only IEv6 & 7 see this */
    
    • 你还应该知道的:
      • 转化之后的图片代码通常比图片本身要大。
      • IE8支持的最大内嵌图片代码为32768个字节
      • 以data形式插入图片不是万能的,很多情况下,插入一张图片反而易于修改和维护。

    相关文章

      网友评论

          本文标题:插入图片新方式:data:image

          本文链接:https://www.haomeiwen.com/subject/vtnakttx.html