CSS Sprites - не только для фоновых изображений? - PullRequest
Новая
       49

CSS Sprites - не только для фоновых изображений?

9 голосов
/ 11 марта 2010

Можно ли использовать CSS-спрайты для изображений "на переднем плане" - то есть изображений, на которые пользователи должны нажимать, взаимодействовать и, возможно, даже печатать?

Вместо использования свойства CSS background-image. Что бы вы использовали?

Ответы [ 5 ]

15 голосов
/ 11 марта 2010

Вы можете использовать стандартный тег <img /> и поместить его в контейнер (например, <div />) с ограниченной высотой / шириной. Затем используйте относительное расположение или отрицательные поля для управления положением изображения.

0 голосов
/ 06 июня 2018

Я решил эту проблему, используя теги img и используя свойства object-fit и object-position в моем css. Вот пример HTML и CSS, которые я использовал: -

HTML 

<img src="<your image source>" class="sprite-icon sprite-icon-1 " />

CSS 

.sprite-icon {
  height: 20px;
  width: 20px;
  object-fit: none;
}

.sprite-icon-1 {
  object-position: 0 0;
}

.sprite-icon-2 {
  object-position: -20px 0;
}

Очевидно, вам нужно изменить положение и параметры размера в соответствии со спрайтом, который вы используете. Для полного рабочего примера, проверьте это fiddle

0 голосов
/ 05 мая 2017

Одно основное требование, которое не может быть обработано фоновыми изображениями, относится к ARIA. Все требования ARIA будут отклонять использование фоновых изображений для значимого, навигационного и другого «информативного» использования, которое программа чтения с экрана должна интерпретировать от имени пользователя с ограниченными возможностями. Возможность замены оператора css фонового изображения для тега img и некоторых тегов ARIA, когда это необходимо, является важной функцией в текущей регулируемой среде разработки.

Ответ на оригинальный вопрос да ! Можно использовать изображение, отображаемое в операторе css background. Но вы должны открыть изображение спрайта в редакторе изображений и выбрать часть, представляющую нужный вам спрайт, сохранить его как отдельное изображение и сослаться на него в теге img.

Проблема заключается в том, что часто такие ситуации возникают в предварительно созданной управляющей библиотеке. Найти и изменить код в библиотеке, которая выбирает и отображает фоновое изображение, немного сложно, изменить код сложно!

0 голосов
/ 11 марта 2010

Вы можете сделать это с меньшим количеством 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", будет содержать только изображение, и ничего больше. Это может быть <a> <input> или обычный <div>, что вы хотите.

Это фоновое изображение ... но это элемент, на который вы смотрите, перед этим фоном ничего нет. То, что вы используете background-image для свойства, не означает, что это не элемент переднего плана ... как кнопка, которую вы можете нажать. Вы можете сделать это так: 

<input type="button" class="myClass" />
0 голосов
/ 11 марта 2010

Вы можете сделать это, но вы должны использовать фоновые изображения для спрайтов, поскольку вы должны быть в состоянии установить положение. Это может быть использовано для ссылок или как угодно. Посмотрите на спрайт Google, они используют его для кнопок на iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif

...