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

简介:   前几天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示例。

  前几天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的示例:

image

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

  image~\App_Sprites\categories\sprite0.png

  image~\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。

image

  图中框中的文件为小的图片文件,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

   附原图一张:

image

目录
相关文章
|
20天前
|
开发框架 算法 .NET
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
|
20天前
|
开发框架 Cloud Native .NET
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
|
2月前
|
开发框架 安全 .NET
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱。它不仅加速了应用开发进程,提升了开发质量和可靠性,还促进了创新和业务发展,培养了专业人才和技术社区,为软件开发和数字化转型做出了重要贡献。
45 5
|
2月前
|
传感器 人工智能 供应链
.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。
本文深入探讨了.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。通过企业级应用、Web应用及移动应用的创新案例,展示了.NET在各领域的广泛应用和巨大潜力。展望未来,.NET将与新兴技术深度融合,拓展跨平台开发,推动云原生应用发展,持续创新。
51 4
|
2月前
|
机器学习/深度学习 人工智能 Cloud Native
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台。本文深入解析 .NET 的核心优势,探讨其在企业级应用、Web 开发及移动应用等领域的应用案例,并展望未来在人工智能、云原生等方面的发展趋势。
49 3
|
2月前
|
敏捷开发 缓存 中间件
.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素
本文深入探讨了.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素,并通过企业级应用和Web应用开发的实践案例,展示了如何在实际项目中应用这些模式,旨在为开发者提供有益的参考和指导。
48 3
|
2月前
|
开发框架 安全 Java
.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力
本文深入探讨了.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力。.NET不仅支持跨平台开发,具备出色的安全性和稳定性,还能与多种技术无缝集成,为企业级应用提供全面支持。
43 3
|
4月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
55 7
|
4月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
100 0
|
5月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
74 0