Вся идея графического фреймворка заключается в том, что он генерирует 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.
Также убедитесь, что вы прочитали документацию для различных режимов и файл settings.xml
, который позволяет настраивать эти режимы.