Спрайты внутри CSS с каркасом образа aspnet - PullRequest
0 голосов
/ 30 января 2011

Привет, я использую спрайт-фрейм http://aspnet.codeplex.com/releases/view/50140

У меня это работает, так что я могу делать такие вещи, как:

@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;
}

Ответы [ 3 ]

0 голосов
/ 30 января 2011

Это потребует от вас создания файла CSS на лету, во время выполнения и исправления путей в ваших классах и идентификаторах.

0 голосов
/ 30 января 2011

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

0 голосов
/ 30 января 2011

Если изображение, на которое вы ссылаетесь в файле CSS, существует, то оно должно работать.Путь CSS относительно файла CSS.О, у вас есть правильный путь?Вы можете проверить с помощью firebug.

...