Спрайты CSS - не только для фоновых изображений?
Действительно ли это возможно использовать спрайты CSS для "приоритетных" изображений - т.е. отображает это, пользователи, как предполагается, нажимают и взаимодействуют с и возможно даже печатают?
Вместо того, чтобы использовать CSS background-image свойство. Что Вы использовали бы?
3 ответа
Вы можете использовать стандартный тег и поместить его в контейнер (например,
) с ограниченной высотой / шириной. Затем используйте относительное позиционирование или отрицательные поля, чтобы контролировать положение изображения.
Вы можете это сделать, но вы должны использовать фоновые изображения для спрайтов, так как вы должны иметь возможность устанавливать положение. Это можно использовать для ссылок или чего угодно. Посмотрите на спрайт Googles, они используют его для кнопок в iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
Вы можете сделать это с меньшим количеством CSS, например:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Как бы то ни было имеет класс Это фоновое изображение ... но это тот элемент, на который вы смотрите, перед ним ничего нет. Тот факт, что вы используете class = "myClass" будет содержать только изображение, ничего больше. Это может быть или обычный background-image для свойства, не означает, что это не элемент переднего плана ... как кнопка, на которую вы можете нажать. Это можно сделать так: <input type="button" class="myClass" />