Получить фоновое изображение из файла изображения по позиции в CSS

Question

Мы предполагаем, что у нас есть следующее изображение (это один файл с 4-мя переключателями, кажется одинаковым, но это, например, значки могут отличаться):

Некоторое время назад я видел, как получить изображение, указав background-position в стиле CSS.Как это сделать ?

Значит, как получить значок из правого нижнего угла в CSS вместо того, чтобы разделить этот файл на четыре иконки отдельно?

Извините, если этот вопрос устарел, но я новичок в CSS.

Answer 1

Посмотрите на атрибут background-position.

MDN имеет статью об этом, включая примеры.

Существует также ряд статей о изображениях-спрайтах с CSS .

Answer 2

Ответ Джангида не совсем правильный.

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

Это не правда; в настоящее время CSS не позволяет "вырезать" область из изображения спрайта. Все, что возможно, это установить позиционирование в соответствии со стандартом (слева, сверху, справа, снизу или со смещением).

Вы должны убедиться, что, если ваша графика будет использоваться в качестве фона для элемента FLUID (то есть с автоматической высотой / шириной), ваши изображения будут располагаться достаточно хорошо. Если вы не разместите их на достаточном расстоянии друг от друга, то на заднем плане вы можете увидеть более одного изображения, а не только ту часть, которую вы хотите.

Например, ваш спрайт содержит 36 изображений размером 32 пикселя, аккуратно расположенных на сетке 40 пикселей.

Если элемент, к которому вы применяете фоновое изображение, шире и / или выше 40 пикселей, вы увидите часть других изображений в качестве фона, что явно неудовлетворительно.

Надеюсь, это поможет.

Answer 3

Вы можете настроить изображения спрайтов в css через background-position сверху, слева, снизу, справа.

В фоновом режиме css: -

background-position: top, left относится к положительным значениям, таким как: -если нужно спрайтовое изображение сверху, слева, чтобы вы могли задать положительные значения для настройки изображения, например: -

 background-position: 5, 10; // top left

, поэтому указанное выше положение будет регулировать верхнее и левое положение фона.

А если вам нужна нижняя правая позиция фона, чтобы вы могли использовать метод

    background-position: 0, -50px; // bottom left
    background-position: -50px, -50px; // bottom right

, поэтому указанное выше положение будет регулировать нижнее и правое положение фона.

Answer 4

Итак, вы используете спрайты изображений.

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Answer 5

Допустим, ваше изображение имеет размер 100 на 100 пикселей, а каждая кнопка занимает 50 на 50 пикселей (включая некоторые возможные пробелы).

Позиционирование для фоновых изображений начинается в верхнем левом углу. Так 0, 0.

Ваш CSS может выглядеть примерно так:

background-image: url( ../images/button-sprite.png);
background-position: 0, 0; // top left
background-position: -50px, 0; // top right
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right

Не то чтобы вышеперечисленное не использовалось все вместе. Вы должны использовать отдельный background-position для каждой кнопки.

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

Я склоняюсь к тому, чтобы напоминать себе, что если бы я добавил отступ к элементу, он бы оттолкнул его вниз. В основном то же самое касается фонового позиционирования. Если бы мы использовали 50px (положительно), мы бы «толкали изображение вниз» вместо того, чтобы тянуть его туда, где оно нам нужно. Имеет смысл?