CSS: отображение одного конкретного значка из файла изображения

Как установить свойство CSS background-image, чтобы загрузить только один значок из большего изображения?CSS: отображение одного конкретного значка из файла изображения

Например, пользовательский интерфейс jQuery настраивает свой виджет Dialog, используя следующий файл изображения PNG: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, который кодирует в нем кучу значков. Затем, как показано в http://docs.jquery.com/UI/Dialog, нижний правый регулятор размера загружает самую последнюю иконку из PNG.

Использование Firebug Я могу увидеть кучу свойств CSS, таких как ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se, который относится к url(ui-icons.xx.png), но ничего не дает выбора конкретного значка.

источник

2009-09-30 Jerry Chong

Это на самом деле техника CSS-спрайт.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

использование

background-position

недвижимость

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

Например:

body { background: url("banner.jpeg") right top } /* 100% 0% */ 
body { background: url("banner.jpeg") top center } /* 50% 0% */ 
body { background: url("banner.jpeg") center }  /* 50% 50% */ 
body { background: url("banner.jpeg") bottom }  /* 50% 100% */

фона CSS свойство является сокращённого свойства для установки индивидуального свойства фона значения в одном месте в таблице стилей. фон может использоваться для установки значений для одного или нескольких: background-color, background-image, background-position, background-repeat, background-attachment.

.PosBG { 
    background-image: url("logo.png"); 
    background-attachment: fixed; 
    background-position: 100% 100%; 
    background-repeat: no-repeat; 
}

источник

2009-09-30 05:09:45 rahul

Что-то вроде следующего:

background-image: url('yourimage.png'); 
background-repeat: no-repeat; 
background-position: 25px 0px;

см http://www.w3schools.com/css/pr_background-position.asp более на фоне положении

источник

2009-09-30 05:10:05

Спасибо за участие –

Вышеупомянутая ссылка была разбита. Используйте это вместо этого: http://www.w3schools.com/css/css_image_sprites.asp – Javide

@javid Я просто прочитал вашу полезную полезную ссылку, но в том, что они говорят, что технология спрайтов полезна и объясняет, что я согласен с w3school. но как насчет этого утверждения «Веб-страница со многими изображениями может занять много времени для загрузки и генерации нескольких запросов сервера». для разделения изображений любого способа, которым нужно многократно вызывать изображение, используя свойство url. – user2826111

Under the covers...

Элементы анкерные фиксированного размера и фона устанавливается в изображение, содержащее все значки, но свойство background-position указано чтобы сдвинуть фоновое изображение так, чтобы отображался только нужный значок из изображения.

Посмотрите на A List Apart's explaination of the technique.

источник

2009-09-30 05:16:03 MyItchyChin

Спасибо, это мне очень помогло ...... – User

CSS: отображение одного конкретного значка из файла изображения

ответ

Смежные вопросы