`
xiaoluode
  • 浏览: 14829 次
  • 来自: 深圳
社区版块
存档分类
最新评论

css sprites介绍

阅读更多

一、CSS Sprites简介

通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。

CSS Sprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

 
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
 
 
 
二、CSS Sprites工作原理 
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,在需要用到图片的时候,通过CSS属性background-image组合background-repeat, background-position等来实现。
 
通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你看到只该看到的而已。就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。
 

 

三、CSS Sprites优点  

1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
 
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
 
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
 
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

 

 

四、CSS Sprites缺点

1、在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

2、至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。

3、由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

4、前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。

 

 

五、CSS Sprites图片切割术

1、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。
2、不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。


3、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。
4、size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。


5、在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。
6、在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。


7、图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。
8、区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。
9、黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。

 

 

六、CSS Sprites实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#tools h5    {
    margin: 0 0 10px 0;
    padding: 0;
    overflow:hidden;
}
div#tools h5#tools_reference, div#tools h5#tools_quiz {
    text-indent: -9999px;
    width: 120px;
    height: 45px;
}
div#tools h5#tools_reference a,  div#tools h5#tools_quiz a {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#tools h5#tools_reference a    {
    background: transparent url(图片URL) top left no-repeat;
}
div#tools h5#tools_reference a:hover    {
    background: transparent url(图片URL) 0 -45px no-repeat;
}
div#tools h5#tools_quiz a    {
    background: transparent url(图片URL) top left no-repeat;
}
div#tools h5#tools_quiz a:hover    {
    background: transparent url(图片URL) 0 -45px no-repeat;
}  
</style>
</HEAD>
<BODY>
  <div id="tools"> 
    <h5 id="tools_reference"><a href="">PHP 参考手册</a></h5> 
    <h5 id="tools_quiz"><a href="">PHP 测验</a></h5> 
  </div>
</BODY>
</HTML>
 
分享到:
评论

相关推荐

    利用Simulink实现混合储能系统在直流微网中的下垂控制策略研究:保持直流母线电压稳定的实践与探究,Simulink仿真下的光储直流微网混合储能系统下垂控制策略优化研究(注意版本要求为2021A以上

    利用Simulink实现混合储能系统在直流微网中的下垂控制策略研究:保持直流母线电压稳定的实践与探究,Simulink仿真下的光储直流微网混合储能系统下垂控制策略优化研究(注意版本要求为2021A以上),混合储能系统 光储微网 下垂控制 Simulink仿真 注意版本2021A以上 由光伏发电系统和混合储能系统构成直流微网。 混合储能系统由超级电容器和蓄电池构成,通过控制混合储能系统来维持直流母线电压稳定。 混合储能系统采用下垂控制来实现超级电容和蓄电池的功率分配,蓄电池响应低频量,超级电容响应高频量。 通过改变光照来影响光伏出力,控制混合储能系统保持微网直流母线电压稳定在380V,不受光伏出力变化影响。 ,混合储能系统; 光储微网; 下垂控制; Simulink仿真; 版本2021A; 直流母线电压稳定; 光伏出力变化; 超级电容器; 蓄电池。,2021A+混合储能系统:光储微网下垂控制Simulink仿真研究

    JavaScript入门到精通: 全栈编程语言的基础与进阶学习指南

    内容概要:本文档是针对JavaScript这一跨平台解释型语言的详尽入门手册,首先概述了JavaScript的概念及其重要特性,强调它不仅适用于前端同时也活跃于Node.js的服务器环境之中,从而成为全栈开发的重要技能。紧接着文档阐述了JavaScript的基本语法元素如变量声明、数据类型、运算符及控制结构,让新手理解JavaScript的语法规则,并通过函数与对象操作加深印象。之后介绍了一些常见的实用工具和高级用法,例如模板字符串、解构赋值以及异步编程手段(比如Promise)。对于想要深入探索的应用场景给出了广泛的指引,无论是传统的web开发还是新兴领域的IoT或自动化脚本编写皆有所涉猎。 适合人群:对于那些没有编程背景或有其他编程经验但仍希望了解并擅长运用JavaScript的个人来说非常适合。 使用场景及目标:目的是向初学者提供足够的理论指导和技术实践机会,使他们能够在不同平台上利用JavaScript创造出有意义的作品;不论是想要从事专业软件开发或是业余项目爱好者都能够从中受益。 其他说明:文档还提供了大量权威且有用的外部链接供进一步深造学习,包括但不限于主流的在线课程、权威的技术参考资料及充满活力的支持社区。

    2D3D 中弗里德里希常数和庞加莱常数的计算 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿,级联H桥svg无功补偿statcom,采用三层控制策略。 (1)第一层采用电压电流双闭环pi控制,电压电流正负序分离,电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定,电流内环采用前馈解耦控制; (2)第二层相间电压均衡控制,注入零序电压,控制通过注入零序电压维持相间电压平衡; (3)第三层相内电压均衡控制,使其所有子模块吸收的有功功率与其损耗补,从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词: 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为:不

    基于时空RBF-NN的混沌时间序列预测 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    基于主从博弈的动态定价策略与电动汽车充电管理优化在智能小区的实践(MATLAB+CPLEX gurobi实现),基于主从博弈理论的智能小区电动汽车充电与代理商动态定价策略优化研究,MATLAB代码:基

    基于主从博弈的动态定价策略与电动汽车充电管理优化在智能小区的实践(MATLAB+CPLEX gurobi实现),基于主从博弈理论的智能小区电动汽车充电与代理商动态定价策略优化研究,MATLAB代码:基于主从博弈的智能小区代理商定价策略及电动汽车充电管理 关键词:电动汽车 主从博弈 动态定价 智能小区 充放电优化 参考文档:《基于主从博弈的智能小区代理商定价策略及电动汽车充电管理》基本复现 仿真平台:MATLAB+CPLEX gurobi平台 主要内容:代码主要做的是一个电动汽车充电管理和智能小区代理商动态定价的问题,将代理商和车主各自追求利益最大化建模为主从博弈,上层以代理商的充电电价作为优化变量,下层以电动汽车的充电策略作为优化变量,通过优化得出最优电价策略以及动态充电策略。 ,电动汽车; 主从博弈; 动态定价; 智能小区; 充放电优化; MATLAB; CPLEX; gurobi平台。,基于主从博弈的电动汽车充电管理与定价策略优化MATLAB代码实现

    (程序、GUI、思路)MATLAB打印纸缺陷检测GUI设计.zip

    基于Matlab语言实现的设计项目 2、适用人群:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计中的部分功能,作为“参考资料”使用。 3、解压说明:本资源需要电脑端使用WinRAR、7zip等解压工具进行解压,没有解压工具的自行百度下载即可。 4、免责声明:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。不一定能够满足所有人的需求,需要有一定的基础能够看懂代码,能够自行调试代码并解决报错,能够自行添加功能修改代码。由于作者大厂工作较忙,不提供答疑服务,如不存在资源缺失问题概不负责,谢谢理解。

    《基于 Transformer 的恶意软件检测器》(毕业设计,源码,教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是均来自个人的课程设计、毕业设计或者具体项目,代码都测试ok,都是运行成功后才上传资源,答辩评审绝对信服的,拿来就能用。放心下载使用!源码、说明、论文、数据集一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 4、如有侵权请私信博主,感谢支持

    Labiew噪音与振动检测模块源码揭秘:傅里叶变换与倍频程技术应用于实际项目,LabVIEW平台噪声与振动检测模块源码解析:基于傅里叶变换与倍频程原理的实用功能模块,已成功应用于实际项目,虚拟产品退换

    Labiew噪音与振动检测模块源码揭秘:傅里叶变换与倍频程技术应用于实际项目,LabVIEW平台噪声与振动检测模块源码解析:基于傅里叶变换与倍频程原理的实用功能模块,已成功应用于实际项目,虚拟产品退换政策严谨执行,Labiew噪音与振动检测模块源码,改功能模块已运用到实际项目,原理是利用傅里叶变和倍频程实现的,产品一旦发概不 。 需要的可以联系哟 ,Labiew源码; 噪音与振动检测模块; 傅里叶变换; 倍频程; 实际项目运用,Labiew傅里叶变换倍频程噪音振动检测模块源码

    基于Comsol多物理场仿真的光伏集热器异形体建模技术研究,探索comsol多物理场仿真技术:光伏集热器异形体建模应用,comsol多物理场仿真,光伏集热器,异形体建模 ,comsol多物理场仿真;

    基于Comsol多物理场仿真的光伏集热器异形体建模技术研究,探索comsol多物理场仿真技术:光伏集热器异形体建模应用,comsol多物理场仿真,光伏集热器,异形体建模 ,comsol多物理场仿真; 光伏集热器仿真; 异形体建模,Comsol多物理场仿真在光伏集热器及异形体建模中的应用

    器官3D分割-基于WinForm框架开发的医学影像系统源码+sln+演示视频(毕设基于c#和python开发).zip

    器官3D分割-基于WinForm框架开发的医学影像系统源码+sln+演示视频(毕设基于c#和python开发).zip 【项目简单介绍】 主要功能 肺炎诊断 器官 3D 分割 该系统具备肺炎诊断和器官 3D 分割的功能,并模仿了罗万科技的系统界面风格。 python和c#开发实现

    界面GUI设计MATLAB BP的水果识别.zip

    MATLAB可以用于开发水果识别系统。这种系统通常利用机器学习和图像处理技术,对输入的水果图像进行特征提取和分类识别。以下是开发水果识别系统的一般步骤: 1. 数据收集:收集包含各种水果类别的图像数据集。 2. 数据预处理:对图像进行预处理,包括裁剪、缩放、灰度化等操作。 3. 特征提取:从每个水果图像中提取特征,例如颜色直方图、纹理特征、形状特征等。 4. 数据标记:为每个图像标记水果类别,形成训练集和测试集。 5. 模型训练:使用机器学习算法(如支持向量机、卷积神经网络等)对训练集进行训练,建立水果识别模型。 6. 模型测试:使用测试集对模型进行测试和评估,调整模型超参数以提高准确率。 7. 系统集成:将训练好的模型集成到MATLAB应用程序中,实现水果识别功能。 8. 用户界面设计:设计用户友好的界面,以便用户上传水果图像并查看识别结果。 MATLAB提供了丰富的图像处理工具箱和机器学习工具箱,可以帮助开发者快速构建水果识别系统。通过结合这些工具箱,可以实现水果的快速、准确识别。

    COMSOL声子晶体仿真研究:一维至三维能带与带隙分析及色散曲线弹性波声波分析,声子晶体仿真:COMSOL代做能带图、带隙图及弹性波、声波分析与优化设计,COMSOL代做 声子晶体仿真,一维,二维,三

    COMSOL声子晶体仿真研究:一维至三维能带与带隙分析及色散曲线弹性波声波分析,声子晶体仿真:COMSOL代做能带图、带隙图及弹性波、声波分析与优化设计,COMSOL代做 声子晶体仿真,一维,二维,三维能带图,带隙图,色散曲线,弹性波,声波。 ,COMSOL代做;声子晶体仿真;一维/二维/三维能带图;带隙图;色散曲线;弹性波仿真;声波分析,COMSOL声子晶体仿真专家:一至三维声波模拟及能带图绘制

    Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真

    Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真,Flyback反激式开关电源仿真 ,Matlab; Simulink仿真; Flyback反激式; 开关电源仿真,Matlab Simulink在Flyback反激式开关电源仿真中的应用

    陪读租房系统(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计

    陪读租房系统(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计 【功能需求】 本系统有三个角色:管理员、租客和房主,要求具备以下功能: (a) 管理员;管理员使用本系统涉到的功能主要有:首页、个人中心、租客管理、房主管理、房源信息管理、房源类型管理、教育书籍管理、文章分类管理、租房信息管理、合同信息管理、在线咨询管理、咨阅回复管理、教育论坛、系统管理等功能。 (b) 租客;进入前台系统可以实现首页、房源信息、教育书籍、教育论坛、公告信息、后台管理等功能进行操作。 (C) 房主;进入系统可以实现首页、个人中心、房源信息管理、租房信息管理、合同信息管理、在线咨询管理、咨询回复管理等功能进行操作。 【环境需要】 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.数据库:MySql 5.7/8.0等版本均可; 【购买须知】 本源码项目经过严格的调试,项目已确保无误,可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件,讲解视频,部署视频教程,一应俱全,可以自己按照教程导入运行。附有论文参考,使学习者能够快速掌握系统设计和实现的核心技术。

    vue3的一些语法以及知识点

    vue3的一些语法以及知识点

    libicu-doc-50.2-4.el7-7.x64-86.rpm.tar.gz

    1、文件内容:libicu-doc-50.2-4.el7_7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/libicu-doc-50.2-4.el7_7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    水果销售商城(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计

    水果销售商城(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计 【功能需求】 水果购物网站用户可以注册登录,在首页开通会员卡,查看水果,购买水果,查看水果信息,以及个人中心修改个人资料,在自己的后台查看自己的购买记录等。 水果购物网站管理员功能:个人中心管理,用户管理,会员管理,会员卡管理,开通会员记录管理,积分管理,水果管理,购买水果订单管理,积分兑换管理,积分兑换记录管理,加积分记录管理,减积分记录管理。 【环境需要】 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.数据库:MySql 5.7/8.0等版本均可; 【购买须知】 本源码项目经过严格的调试,项目已确保无误,可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件,讲解视频,部署视频教程,一应俱全,可以自己按照教程导入运行。附有论文参考,使学习者能够快速掌握系统设计和实现的核心技术。

    基于Matlab的双输入深度学习模型构建指南:处理序列与图像数据的创新性应用,Matlab双输入深度学习模型搭建指南:如何处理两种输入数据并实现创新与优势,Matlab搭建双输入深度学习模型,双输入网

    基于Matlab的双输入深度学习模型构建指南:处理序列与图像数据的创新性应用,Matlab双输入深度学习模型搭建指南:如何处理两种输入数据并实现创新与优势,Matlab搭建双输入深度学习模型,双输入网络。 相比普通的单输入网络,双输入网络能处理两种输入数据,在科研上也更具有优势和创新性。 如何用Matlab搭建双输入网络也是困扰本人很长时间的一个问题,现已弄明白。 注意,需要Matlab 2022b及以上版本,以下版本估计是都不行。 本程序是两个输入全为一维序列的情况(第二个输入序列是第一个输入序列的特征值,或者变后的序列)。 也可改为两边输入都是图像,或者一边输入图像,一边输入图像的一维特征序列。 本程序工作如下: 1、加载数据,两种输入数据一一对应,第二个数据是第一个数据做FFT之后的序列,属于一个类别。 两种数据样本数相等,序列长度不相等。 2、搭建双输入网络,此网络一边是CNN-LSTM,一边是CNN。 3、训练。 4、测试,输出准确率。 注:程序可直接运行,包教会和调通。 可以有偿修改为两边输入都是图像,或一边输入图像一边输入序列的模型。 可有偿替数据,调通程序。 程序注释详

    十大管理的49个过程组强化记忆

    包含十大管理49个过程组的输入与输出和解释,还有EVA铮值管理的公式汇总和解释

Global site tag (gtag.js) - Google Analytics