может ли фоновое изображение быть отрицательно расположено внизу или справа или повторяться только часть изображения?

Question

Я собираю спрайт и задаю два вопроса.

Что-то, что меня всегда интересовало, возможно ли негативное расположение фонового изображения справа или снизу.Отрицательная позиция - это хлеб с маслом слева от элемента или верха, но как насчет справа и снизу?

Если у меня есть деление 500 на 500 пикселей, могу ли я расположить левый край фонового изображения,появиться на 5 пикселей справа, используя отрицательное значение, превышающее 495 пикселей, чтобы переместить его?

Второй вопрос: могу ли я использовать только небольшую часть изображения и повторять его, не показывая остальную часть изображения.

Например, у меня может быть спрайт площадью 300 пикселей и заполненный всевозможными вещами.Можно ли взять квадратную часть изображения размером 50px и повторить его на фоне элемента?

Я очень сильно сомневаюсь, что это возможно, но нужно усыпить обезьяну!

Answer 1

Чтобы «негативно расположить фоновое изображение справа или снизу», вы можете использовать проценты менее 0%.Например:

background-position: -11% -7%;

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

Чтобы «негативно расположить фоновое изображение к влево или вверх », вы можете использовать проценты больше 100%.Например:

background-position: 105% 110%;

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

Однако найти точные проценты вам не очень интуитивно понятно.CSS использует проценты немного по-другому с background-position.Значение - это процентное соотношение как к изображению, так и к элементу (он же видовой экран), где они одинаковы.Вот почему 0% равно left, 50% равно center, а 100% равно right.За пределами этого диапазона он еще менее интуитивен, так как «меньше нуля» соответствует точке перед верхним / левым краем как на изображении, так и на элементе (эффективно смещая изображение на от верхнего / левого),и «больше 100%» соответствует точке, превышающей дальний нижний / правый край, что приводит к смещению изображения на снизу / справа.

Это уравнение помогает определитьгде вы хотите, чтобы изображение сидело.Простая алгебра даст вам переменную, которую вы хотите знать (например, решить для процента).

effectiveLeft = (elementWidth - imageWidth) * percentageLeft;
effectiveTop = (elementHeight - imageHeight) * percentageTop;

Что касается вашего второго вопроса (повторяющаяся часть изображения), я не верю, что это возможно, если толькоВы должны были повторить несколько элементов обрезки, что отличается от того, что вы хотели.

Answer 2

Если вы используете процентное положение фона, вы можете.Таким образом, вы хотели бы что-то вроде:

background-position: 190% 0;

Answer 3

Чтобы отрицательная правая нижняя позиция работала правильно, этот DIV обязательно должен иметь свойство background-repeat: no-repeat;

Answer 4

Они уже ответили, что вы не можете использовать отрицательные значения, но, возможно, вы можете попробовать:

Дайте элемент background-position:right bottom, и изображение для фона должно иметь только ту часть, которую вы хотите показать.

Answer 5

На ваш первый вопрос, нет, вы не можете.

На ваш второй вопрос, нет, вы не можете.

Answer 6

Свойство background-position имеет несколько различных значений:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Вы также можете указать для него позиции X и Y.Для получения дополнительной информации, посмотрите на эту ссылку:

https://developer.mozilla.org/docs/CSS/background-position

Что касается вашего второго вопроса, это невозможно при использовании простого CSS.