Любые примеры, чтобы знать о спрайтах CSS?

Question

Я знаю о спрайтах css .. Теперь я хочу привести несколько примеров спрайтов css ....

• Как вам удалось заставить работать css-спрайты?

Answer 1

Я обычно использую свойство фона CSS. Это свойство позволяет вам установить аргумент прокрутки сверху и слева, как вы можете видеть в примере ниже. Поэтому идея состоит в том, чтобы создать одно изображение со всеми состояниями и просто расположить его на основе события, такого как наведение или другое пользовательское событие, в котором вы изменяете элементы CSS. Надеюсь, это поможет.

.mySprite a
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}

.mySprite a:hover
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}

Answer 2

Если вы хотите создать спрайт CSS - вы можете зайти на сайт spriteme.org, который очень классный и показывает, как легко создать спрайт CSS.

Для хорошего примера вы можете проверить эту страницу:

http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/

Дает хорошее объяснение и показывает, как владелец сайта использует спрайт.

Answer 3

Если вы используете Firefox, вот простой способ понять, что такое спрайт. Перейдите на сайт yahoo.com, щелкните правой кнопкой мыши и просмотрите информацию о странице, нажмите «Медиа» Найдите имя файла, в котором есть спрайт.

Это одна из ссылок: http://d.yimg.com/a/i/ww/met/gsprite_071309.gif

Вы увидите много фоновых изображений градиента. Вы можете использовать этот файл для воспроизведения. Теперь вам нужно настроить положение фона в вашем CSS в зависимости от того, какой фон вы хотите использовать, например:

background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;

Это должно дать вам представление о том, как управлять спрайтами.

Answer 4

http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/

http://www.w3schools.com/css/css_positioning.asp

http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29

Answer 5

Проверить эту страницу:

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

У него отличный интерактивный пример и все, что вам нужно знать о CSS Sprite.

Answer 6

Я использую их для изображений кнопок. Я использую верхнюю половину изображения для нормального состояния кнопки и нижнюю половину для состояния наведения мыши. Таким образом, курсор мыши загружается, когда страница загружается, и нет задержки, которая выглядит плохо и медленно. Код CSS здесь.