一起谈.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

目录
相关文章
|
3月前
|
数据安全/隐私保护
.net给图片增加水印和生成图片缩略图
.net给图片增加水印和生成图片缩略图
31 0
|
6月前
|
存储 开发框架 前端开发
asp.net与asp.net优缺点及示例
asp.net与asp.net优缺点及示例
|
28天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
28 0
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
60 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
2月前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
3月前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
11 0
|
3月前
|
开发框架 安全 搜索推荐
分享105个NET源码ASP源码,总有一款适合您
分享105个NET源码ASP源码,总有一款适合您
27 4
|
3月前
|
前端开发 JavaScript API
2022年CSS生态圈技术趋势!(下)
2022年CSS生态圈技术趋势!(下)
|
3月前
|
前端开发 API C++
2022年CSS生态圈技术趋势!(上)
2022年CSS生态圈技术趋势!