Можно ли использовать CSS-спрайты для изображений «переднего плана», то есть изображения, которые пользователи должны нажимать и взаимодействовать и, возможно, даже печатать?CSS Sprites - не только для фоновых изображений?
Вместо использования свойства CSS background-image. Что бы вы использовали?
Вы можете использовать стандартную бирку <img /> и поместить ее в контейнер (например, <div />) с ограниченной высотой/шириной. Затем используйте относительное позиционирование или отрицательные поля для управления положением изображения.
Вы можете сделать это, но вы должны использовать фоновые изображения для спрайтов, поскольку вы должны иметь возможность установить положение. Это можно использовать для ссылок или чего угодно. Посмотрите на Googles спрайта, они используют его для там кнопки на iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Вы можете управлять позицией любого элемента, используя 'position' в CSS в комбинации с« верхним, левым, правым, нижним ». Кроме того, вы можете использовать отрицательные поля. –
Я никогда не говорил, что вы можете: t контролировать положение в любом элементе. Однако вы можете заставить его работать с фоновыми изображениями на любом элементе. –
Ну, конечно, вы можете, но они специально спрашивают, как это сделать * без * фоновых изображений! –
Вы можете сделать это с меньшим количеством 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> a <input> или нормальный <div>, что бы вы ни хотели.
Это фоновое изображение ... но это тот элемент, на который вы смотрите, ничего перед этим фоном. Просто потому, что вы используете background-image для этого свойства, это не значит, что это не элемент переднего плана ... как кнопка, на которую вы можете щелкнуть. Вы можете сделать это вот так:
<input type="button" class="myClass" />
Это решение на основе фонового изображения, независимо от того, как вы его вращаете. Вопрос явно требует чего-то другого. И я понимаю, почему - очевидно, что * принципиальная разница между изображениями, которые являются частью содержимого документа, и теми, которые являются частью его макета и стиля. – amn
Одним из основных требований, которые не могут быть обработаны фоновыми изображениями, является ARIA. Все требования ARIA отклонят использование фоновых изображений для значимых, навигационных и других «информационных» применений, которые читатель экрана должен интерпретировать от имени пользователя с инвалидностью. Возможность поменять выражение css для фонового изображения для тега img и пометки ARIA, когда это необходимо, является важной особенностью в текущей регулируемой среде разработки.
Ответ на исходный вопрос: да! Можно использовать изображение, которое отображается в операторе css background. Но вы должны открыть изображение спрайта в редакторе изображений и выбрать часть, которая представляет спрайт, который вы хотите, и сохранить его как отдельное изображение и ссылаться на него в теге img.
Проблема в том, что часто эти ситуации возникают в предварительно построенной библиотеке управления. Поиск и изменение кода в библиотеке, которая выбирает и отображает фоновое изображение, немного сложнее, смена кода сложна!
Genius, спасибо! – Summer
Это чрезмерная IMO, вы можете просто установить входной сигнал для отображения блока и удалить div/wrapper из уравнения все вместе, это гораздо более простой подход. –
@Nick Это не имеет никакого смысла. Как применить спрайт без использования контейнера? –