前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。

  下载地址:http://aspnet.codeplex.com/releases/view/50140

  8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59

  下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。

  下面我们就看看ASP.NET MVC的示例:

  图中所标记的图片都是来源于一个整张的图片:

  ~\App_Sprites\categories\sprite0.png

  ~\App_Sprites\popular\sprite0.png

  而这个整张图片则是由Sprite and Image Optimization Framework自动以几个小图片合并并生成类似下面的CSS:

.popular_azureLogo-png{width:32px;height:30px;background-image:url(sprite0.png);background-position:-0px 0;}

  我们下面看看我们怎么在程序中使用这个工具吧。

  1.在程序中建立一个名为App_Sprites的文件夹

  在其中建立子目录每一个子目录中的图片文件将会自动合并成一个大文件,并且生成CSS。

  图中框中的文件为小的图片文件,sprite0.png为自动生成后的大图片、highCompat.css/lowCompat.css为自动生成的CSS文件。

  注:这两个CSS文件暂没有不同,但未来lowCompat.css可能只支持IE7-9、FF的主流浏览器,highCompat将支持其它。

  settings.xml为配置文件:

<?xml version="1.0" encoding="utf-8"?>
<ImageOptimizationSettings>
<FileFormat>png</FileFormat>
<Base64Encoding>false</Base64Encoding>
<Quality>80</Quality>
<BackgroundColor>00000000</BackgroundColor>
<MaxSize>500</MaxSize>
</ImageOptimizationSettings>

  其中FileFormat为大图片类型Based64Encoding为图片地址是否使用Base64编码,如果使用则生成的CSS可能如下:

.categories_azureLogo-png{
width:16px;height:16px;
background: url(data:image/png;base64,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) no
-repeat 0% 0%;}

  Quality为生成图片质量,BackgroundColor为背景色,默认透明,MaxSize为最大图片大小。

  2.如何让这这些文件自动生成的

  这个其中是靠添加Modules来完成的,也就是首次访问页面时就会自动生成大图片以及CSS,在System.Web节点上添加:

<httpModules>
<add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</httpModules>

  或IIS7以上在System.WebServer节点上添加:

<modules runAllManagedModulesForAllRequests="true">
<add type="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</modules>

  都可以达到效果。

  3.如何使用

  第一.引用生成的CSS

<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/categories/") %>
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/popular/") %>

  指定到相应的文件夹就OK了,最终会根据访问者的浏览器,生成:

<link href="App_Sprites/categories/lowCompat.css" media="all" rel="stylesheet" type="text/css" />
<link href="App_Sprites/popular/lowCompat.css" media="all" rel="stylesheet" type="text/css" />

  或使用highCompat.css的link标签。

  第二 . 如何使用某生图片

  如果要用img标签的话:

<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/popular/windowsLogo.png" ) %>

  类似这样去用就可以了,会生成类似下面的标签:

<img class="popular_mesh-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

  如果要直接使用CSS去引用,则可以使用指定的Class来规定Sprite的背景图片:

<div class="categories_windowsLogo-png">windows</div>

  则会在此标签的背景上显示大图片,并自动设定到要显示小图片的位移。

  categories_windowsLogo-png

   则表示要显示~/APP_Sprites/categories/windowsLogo.png

   附原图一张:

一起谈.NET技术,在ASP.NET中自动合并小图片并使用CSS Sprite显示出来相关推荐

  1. 浅谈缓存技术在ASP.NET中的运用

    本篇文章虽不谈架构,但是Cache又是架构中不可或缺的部分,因此,在讲解Cache的同时,将会提及到部分架构知识,关于架构部分,读者可以不用理解,或者直接跳过, 你只需关心Cache即可,具体的架构, ...

  2. 一起谈.NET技术,ASP.NET 中JSON 的序列化和反序列化

    JSON是专门为浏览器中的网页上运行的JavaScript代码而设计的一种数据格式.在网站应用中使用JSON的场景越来越多,本文介绍ASP.NET中JSON的序列化和反序列化,主要对JSON的简单介绍 ...

  3. 《浅谈条形码技术在连锁超市中的应用》论文笔记(二)

    一.基本信息 标题:浅谈条形码技术在连锁超市中的应用 时间:2016 来源:品牌(西京学院) 关键词:条形码技术; 连锁超市; 条码的应用; 二.研究内容 1.问题定义: 条形码作为一项以计算机技术和 ...

  4. 计算机网络技术对教学的作用,浅谈计算机网络技术在教学应用中的作用和发展趋势.docx...

    浅谈计算机网络技术在教学应用中的作用和发展趋势 乜大伟 (山东医学高等专科学校,山东临沂276000 ) [摘要]计算机网络技术在教学中应用的推广,新型教学模式对传统教育思想. 教学观念.教学方法产生 ...

  5. ASP.NET中利用ashx实现图片防盗链

    盗链的危害我就不说了,网上有很多. 直接分析盗链原理:看下面用httpwatch截获的http发送的数据 GET /Img.ashx?img=svn_work.gif HTTP/1.1 Accept: ...

  6. Word处理控件Aspose.Words功能演示:在 Python 中自动合并 MS Word 邮件

    MS Word 邮件合并是一项流行的功能,允许您创建信件.发票.信封.报告等.使用邮件合并,您可以创建模板并使用数据填充它.因此,将为数据源中的每个条目生成一个文档.为了自动化此功能,本文介绍了如何使 ...

  7. 一起谈.NET技术,ASP.NET MVC2.0在Tab页中实现异步无刷新分页

    概述 很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...

  8. 一起谈.NET技术,asp.net页面中输出变量、Eval数据绑定等总结

    在asp.net应用程序中,在asp.net页面常用的<%@ %>.<%# %>.<%= %>.在全球化的项目中使用<%$ %>绑定资源项目,在asp. ...

  9. 一起谈.NET技术,asp.net控件开发基础(18)

    本篇继续上篇的讨论,可能大家已经在使用asp.net2.0了,DataSource属性不再使用,而是跟数据源控件搭配使用.现在讨论的绑定技术都是基于1.1版本,先熟悉一下,本质上是一样的,这样一步步的 ...

  10. 一起谈.NET技术,ASP.NET Eval如何进行数据绑定

    ASP.NET Eval在数据绑定方面的应用是众所周知的,不过技术在发展,当ASP.NET Eval 1.1变成ASP.NET Eval 2.0的时候,在操作的时候会有什么变化呢? 假设你已经了解AS ...

最新文章

  1. Js_Span 滑动手型鼠标样式
  2. Linux突然连不上网,ping不通百度,连不上MobaXterm
  3. arcgis select by attributes一次选多个_优化体系--记一次生产数据库sql优化过程--组合索引...
  4. RPM 的介绍和应用
  5. win7记事本txt图标显示异常解决方法
  6. opencv无获取摄像头视频帧(YUV打开导致失败)
  7. 锚杆拉拔试验弹性模量计算_锚杆拉拔试验检测标准
  8. MapGIS教程-常见问题处理
  9. Win10下OMNeT 5.X 遇到Simulating tictoc-tictoc1-“ has encountereda problemFinished with Error问题
  10. transitive fanout与set_dont_touch_network
  11. APP测试基础--小工具介绍(1)
  12. 失眠怎么办?试试汤臣倍健褪黑素和以下方法!
  13. C语言程序设计-商品销售管理系统
  14. access如何查询两张表的内容_Access使用技术2:使用交叉表查询向导进行每日汇总...
  15. LeetCode 力扣每日一题 488.祖玛游戏
  16. 如何使用 IntelliJ IDEA(2020.2)构建一个JavaWeb项目
  17. 3分钟详解服务器入网带宽出网带宽和入流量出流量
  18. EasyAR_SDK在unity制作ar视频黑屏,只有声音问题
  19. 电子专业 常见面试题 (三)
  20. CV实战项目--人脸考勤

热门文章

  1. 机器学习课程 Neural Netword for Machine Learning笔记
  2. 【ML小结10】集成学习
  3. 最新unity3d中关键概念全解(坐标系,脚本的执行顺序等)
  4. 动手设计 CPU(三)—— 微程序控制的存储器读写系统设计
  5. python list平均数_数据分析之Python干货笔记
  6. QT+ 状态栏+核心控件+浮动窗口
  7. Docker在centos下安装以及常见错误解决
  8. 拦截器(Interceptor)和过滤器(Filter)区别
  9. Java编程:切面条
  10. Linux Linux程序练习十(网络编程大文件发送)