精靈與ASPNET圖像框架

使用精靈框架 http://aspnet.codeplex.com/releases/view/50140

我有工作，這樣我可以做這樣的事情

喜IM：

@Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")

，但我怎麼可以使用CSS文件中的圖片？如

#wrapper { 
    width: 980px; 
    margin: 0 auto; 
    background: url(/App_Sprites/images/img01.gif) repeat-y left top; 
}

來源

2011-01-30 raklos

如果你在CSS文件中引用的圖像存在，那麼它應該工作。 CSS路徑是相對於CSS文件的。你有正確的路徑嗎？你可以檢查螢火蟲。

來源

2011-01-30 14:42:59 rcravens

它的工作原理，但我希望它引用框架創建的精靈圖像，而不是實際的圖像。 – raklos 2011-01-30 15:05:28

這將要求您在運行時創建CSS文件，並在運行時修復類和ID中的路徑。

來源

2011-01-30 15:10:48 mare

圖像框架的整體思想是動態生成CSS文件。因此，我們假設您已將圖片放入~/App_Sprites文件夾中：img1.png，img2.png，img3.png。現在，您只需註冊HTTP模塊在你的web.config：

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

，然後裏面你的頁面的頭部，你包括動態生成CSS：

@ImageSprite.ImportStylesheet("~/App_Sprites/")

將呈現如下：

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

現在所有剩下的就是使用包含這個CSS裏面的規則：

<div class="img1-png"></div>

或者，如果你想直接包括您的標記內的圖像：

@ImageSprite.Image("~/App_Sprites/img1.png")

這樣的想法是，你使用直接由框架生成的動態CSS，你不能在你的CSS文件中使用這些規則。

此外請確保您閱讀documentation爲不同的模式和settings.xml文件，它允許您自定義這些模式。

來源

2011-01-30 16:17:36

精靈與ASPNET圖像框架

回答

相關問題