array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 CSS Sprite雪碧图 - 爱码网

CSS Sprite雪碧图

nyw1983

一、CSS Sprite雪碧图使用场景

浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像的哪一部分。

CSS雪碧即CSS Sprite，也有称之为CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上面，然后利用CSS北京定位来显示需要显示的图像部分。

CSS雪碧图使用场景

  • 是静态图片，不随着用户信息的变换而变化；
  • 小图片，图片容量比较小；（大图不建议拼成雪碧图）
  • 加载量大的图片；

 

二、CSS Sprite雪碧图实现原理和方式

CSS Sprite的基本原理是将网站中需要用到的图片整合到一张单独的图片中，从而减少网站的HTTP请求数量。该图片使用CSS background  和background-position  属性渲染，这就意味着标签变得更加的复杂了，图片是在CSS中定义而不是在HTML中使用图像<img>标签

注意：拼合背景图的小图（X，Y）坐标为负值。以图片左上角的顶点为原点坐标，

根本上来说，就是通过控制一个层可显示区域范围的大小，通过打开一个窗口，进行背景图的滑动。

雪碧图的实现方式：

1、PS自动拼图    2、使用 sprite 工具自动生成。

（CSS sprite自动生成工具 —— CssGaga 是windows环境下快速生成雪碧图的工具，并且可以返回每个小图片的position代码 https://www.99css.com/cssgaga/）

（雪碧图制作专家V1.0 来制作css雪碧图 软件下载地址:http://www.kittyapp.net/soft/CssSpritesMaker.rar）

 

三、CSS Sprite雪碧图的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
    ul{  list-style:none;}
    li h3{
        font-size: 14px;
        font-weight: 400;
    }
    h3{  margin:0; padding:0;}
    li{
        display:block;
        height:31px;
        line-height: 31px;
        overflow:hidden;
        border-bottom: 1px solid #dedede;
    }
    .cat{
        width: 150px;
        background: #f8f8f8;
        border: 1px solid #bbb;
    }
    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="box1">
                <h3>服饰内衣</h3>
                <i></i>
            </li>
            <li class="box2">
                <h3>鞋包配饰</h3>
                <i></i>
            </li>
            <li class="box3">
                <h3>户外运动</h3>
                <i></i>
            </li>
            <li class="box4">
                <h3>珠宝手表</h3>
                <i></i>
            </li>
            <li class="box5">
                <h3>手机数码</h3>
                <i></i>
            </li>
            <li class="box6">
                <h3>家电办公</h3>
                <i></i>
            </li>
            <li class="box7">
                <h3>护肤彩妆</h3>
                <i></i>
            </li>
            <li class="box8">
                <h3>母婴用品</h3>
                <i></i>
            </li>
        </ul>
    </div>

    <!-- div>ul>li.box$*7>(h3{wwwww}+i) -->
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
    ul{  list-style:none;}
    li h3{
        font-size: 14px;
        font-weight: 400;
    }
    h3{  margin:0; padding:0;}
    li{
        display:block;
        height:31px;
        line-height: 31px;
        overflow:hidden;
        border-bottom: 1px solid #dedede;
    }
    li i{
        background: url(j1.jpg);
        display:inline;
        width:30px;
        height:24px;
        float: left;
        margin:3px 10px 0 0;
    }
    .cat{
        width: 150px;
        background: #f8f8f8;
        border: 1px solid #bbb;
    }
    .box1 i{  background-position: 0 0;}
    .box2 i{  background-position: 0 -24px;}
    .box3 i{  background-position: 0 -48px;}
    .box4 i{  background-position: 0 -72px;}
    .box5 i{  background-position: 0 -96px;}
    .box6 i{  background-position: 0 -120px;}
    .box7 i{  background-position: 0 -144px;}
    .box8 i{  background-position: 0 -168px;}

    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="box1">
                <h3>服饰内衣</h3>
                <i></i>
            </li>
            <li class="box2">
                <h3>鞋包配饰</h3>
                <i></i>
            </li>
            <li class="box3">
                <h3>户外运动</h3>
                <i></i>
            </li>
            <li class="box4">
                <h3>珠宝手表</h3>
                <i></i>
            </li>
            <li class="box5">
                <h3>手机数码</h3>
                <i></i>
            </li>
            <li class="box6">
                <h3>家电办公</h3>
                <i></i>
            </li>
            <li class="box7">
                <h3>护肤彩妆</h3>
                <i></i>
            </li>
            <li class="box8">
                <h3>母婴用品</h3>
                <i></i>
            </li>
        </ul>
    </div>
</body>
</html>

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode