background-position-x ⚡️ HTML и CSS с примерами кода
Свойство background-position-x задаёт положение фонового изображения внутри элемента по горизонтали.
Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.
Фон- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис
/* Keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* Side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* Multiple values */ background-position-x: 0px, center; /* Global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset;
Значения
left- Выравнивает фон по левому краю.
Эквивалент записи 0 или 0%. center- Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right- Выравнивает фон по правому краю. Эквивалент записи 100%.
<проценты>- Задаёт положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
<размер>- Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно левого края элемента.
Эквивалент записи 0 или 0%.Значение по-умолчанию:
background-position-x: left;
Применяется ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 4
Поддержка браузерами
Can I Use background-position-x-y? Data on support for the background-position-x-y feature across the major browsers from caniuse.
Смещение краёв фона:
Can I Use css-background-offsets? Data on support for the css-background-offsets feature across the major browsers from caniuse.com.
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>background-position-x</title>
<style>
.clock {
background: url('/example/image/clock-sprite.png')
no-repeat;
width: 128px;
height: 128px;
}
.clock:hover {
background-position-x: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается по горизонтали, показывая цветной рисунок вместо чёрно-белого.
Заставить фоновое изображение начинаться справа, а не слева — Общее — Forum
partlysean
1
Привет всем, ищу помощи по позиционированию фонового изображения.
У меня есть кнопка со значком в фоновом режиме. Чтобы дать ему немного отступа вправо, я позиционирую его на 90% слева. Однако, когда метка кнопки становится очень длинной, она перекрывается и легко ломается. Если бы я мог вместо этого расположить его относительно справа элемента на фиксированном расстоянии в пикселях, это было бы здорово.
. Планируется ли переключение между левым/правым и верхним/нижним в свойстве фонового положения? Спасибо!Озон
Можно ли настроить стрелку так, чтобы она всегда находилась на расстоянии 10 пикселей справа от границы кнопки?
частично морской
3
@Ozone Да, это то, что я надеюсь сделать, но, к сожалению, я могу расположить фоновое изображение стрелки только слева от кнопки.
В CSS я бы написал background-position: right 32px center;
Озон
4
Это расстраивает
@sarahfrison Ничего, если я отмечу эту тему как #feedback:bugs ?
1 Нравится
(Сара — эксперт/модификатор Webflow)
5
@partlysean Какие настройки вы используете для этого? Я собрал быструю кнопку, и вы можете использовать эту настройку, чтобы расположить ее с правой стороны
image1600×789 76,9 КБ
@Ozone В зависимости от ответа ТС, это, вероятно, не ошибка, либо это исправляет ее, либо это функция, которую веб-поток еще не поддерживает изначально.
частично морской
6
@sarahfrison Я собрал быстрый проект Webflow, который точно показывает, что происходит с позиционированием фона. И поскольку я не могу добавить пользовательский код без плана хостинга, я сохранил JSFiddle с нужным мне CSS-решением (ссылка в проекте Webflow).
Вот ссылка на проект: https://preview.
webflow.com/preview/background-position-example?utm_medium=preview_link&utm_source=designer&utm_content=background-position-example&preview=ca0ef0984ba076b6ff44abba82842101&mode=preview.
Спасибо за помощь!
драм (Алекс Драм)
7
Это можно исправить двумя способами.
Сделайте изображение для кнопки так, чтобы оно включало пустое пространство справа от графического элемента и использовало 100% позицию.
Гораздо лучше. Не используйте кнопки
2 лайка
частично
8
Спасибо за предложения, @dram! Это определенно сработает, и я пробовал делать и то, и другое, но я действительно надеялся заставить это работать в одном элементе.
Вариант 1 потребует дополнительной производственной работы при экспорте из нашей библиотеки значков, чего я хотел бы избежать.
Вариант 2 был бы намного более гибким, но он не так прост, как применение простого комбинированного класса к кнопке. Создание пользовательской ссылки, как вы предлагаете, не имеет для меня большого значения, но поскольку мы привлекаем к проекту больше дизайнеров, это вводит дополнительный уровень обучения, чтобы сказать: «перетащите элемент кнопки, чтобы разместить кнопку на сайте, если это не кнопка со значком, и в этом случае вам нужно использовать блок ссылок с вложенным div».
Я буду продолжать думать об этом, а пока я мог бы просто написать какой-нибудь пользовательский CSS, который нацелен на классы комбо значков кнопок, чтобы вручную переопределить положение фона.
драм (Алекс Драм)
9
Если ваши дизайнеры действительно неопытны, вам необходимо создать отдельную страницу с UI Kit. Вы просто скажете им скопировать кнопку «отсюда», изменить сам текст или значок и покончить с этим
РубенМ
10
Привет, у меня такая же проблема. Я пытался сделать ссылку div, но это мешает возможности изменить значок при наведении на фоновое изображение. Если я использую значок стрелки в качестве дочернего элемента, я не могу изменить внешний вид при наведении курсора на «ссылку» (родительский элемент значка).
Надеюсь, самым простым решением будет добавить возможность изменять «правое» значение, а не только верхнее и левое. Это также доступно в общем css…
частично морской
11
Я хочу поддержать эти мысли, @RubenM. Чтобы покрыть свои основы, я создавал кнопки, используя метод, упомянутый @dram (блок ссылок + дочерние элементы для метки и значка), и хотя технически работает как , он не решает 100% случаев использования.
Я не могу отредактировать кнопку отправки формы, чтобы иметь отдельные элементы метки и значка, например, поэтому, если я хочу иметь выровненный по правому краю значок с соответствующим интервалом внутри кнопки отправки, мне не повезло. То же самое касается других «родных» элементов Webflow, таких как раскрывающиеся списки и поля выбора.
И, как вы указали, вы не можете изменить внешний вид значка при наведении курсора на эту пользовательскую кнопку, не создавая сложный триггер элемента + взаимодействие. Я бы предпочел сделать это, используя простой эффект перехода к элементу.
Я думаю, это мое разочарование: Webflow якобы является графическим интерфейсом для CSS, и в этом посте я прошу, чтобы этот графический интерфейс поддерживал собственное свойство CSS, которое в настоящее время отсутствует. Создание пользовательских кнопок на самом деле не является решением или полезным обходным путем, поэтому я надеюсь, что Webflow поддерживает возможность переключения положения фона между левым/правым и верхним/нижним.
радость (Джо)
12
Присоединяясь к вечеринке здесь, я согласен с вашим последним комментарием @partlysean — это расстраивает, что GUI на самом деле не справляется с тем, что может делать CSS.
Я ненавижу добавлять CSS в пользовательский код, чтобы решать подобные проблемы. Окно графического интерфейса «позиция» должно обновлять поля справа, поэтому при нажатии правой опции значение должно обновляться до «справа»: 0%, а не «слева»: 100%
Я использовал рамку на своем объекте, чтобы создайте правильный интервал, но это взлом веб-потока и беспорядок.
спирелли
13
То же самое, это должно сработать. Мне нужно разместить значок справа от текстовых ссылок в элементе Rich Text. И если бы это могло работать только с правильно расположенным фоновым изображением и некоторыми отступами, это было бы хорошо. Теперь я застрял!
Джонатанронсхольдт (Джонатан Роншольдт)
14
Согласен! Это должно просто работать.
Раздражающий. Изменение того, должно ли фоновое изображение быть выровнено слева или справа, является очень простым css.
Джонатан_Роншольдт (Джонатан Роншольдт)
15
Ничего нового в этом нет?
Пабло_Кортес (Пабло Кортес)
16
Я не совсем понимаю, в чем проблема с этим постом. @dram только что дал действительно хорошие решения. Если эти решения не сработали в вашем случае, просто добавьте свойства CSS во встроенный элемент или в раздел пользовательского кода настроек страницы.
Я только что сделал это с примером @partlysean, и он отлично работает. Теперь это дополнительный шаг, но вставку можно добавить в контейнер вместе с кнопкой, и она станет всего лишь одним повторно используемым элементом.
Скриншот 2021-04-14 в 12.01.28 PM801×347 11,4 КБ
ахоролец (Андрей)
17
Проблема в том, что когда вы размещаете фон справа от пользовательского интерфейса, вы ожидаете, что он будет на 0% справа, а не на 100% слева. Есть ли веская причина, по которой это делается именно так? Я не мог придумать ни одного.
Конечно, всегда есть обходной путь, но в данном случае это промежность для неправильно сделанного пользовательского интерфейса.
css — Как разместить фоновое изображение на абсолютном расстоянии справа от его контейнера?
спросил
Изменено 5 лет, 7 месяцев назад
Просмотрено 35 тысяч раз
Я могу расположить маленькое фоновое изображение/значок в 4 пикселях от центра слева от его контейнера с помощью:
background: url(...) no-repeat 4px 50%;
Как я могу расположить его на 4 пикселя от справа от ?
4
В зависимости от вашей ситуации и поддерживаемых браузеров это работает (проверено на IE7-8, Firefox):
background: url(...) no-repeat right 50%; граница справа: 4 пикселя сплошная прозрачная;
Конечно, если вы уже ставите бордюр справа, это вам никак не поможет.
Добавлено при редактировании: Если вышеперечисленное не работает, потому что вы используете границу, и вам все равно на IE7 (еще не уверен, что мы совсем в этом месте), и ширина вашего «значка» известна , то вы можете сделать:
.yourContainer {
положение: родственник;
}
.yourContainer: после {
содержание: ' ';
дисплей: блок;
положение: абсолютное;
сверху: 0;
внизу: 0;
справа: 4 пикселя;
ширина: 10 пикселей; //ширина иконки
z-индекс: -1; //заставляет его действовать как фон
фон: url(.
..) без повторов справа 50%;
}
1
CSS3 добавляет новый способ указания background-position :
background-position: right 10px top 50%;
Фоновое изображение должно располагаться на расстоянии 10 пикселей справа и по центру по вертикали.
2
как насчет
background: url(...) no-repeat right 50%; отступ: 0px; заполнение справа: 4px;
на случай, если вам когда-нибудь понадобится рамка
Насколько мне известно, вы не можете.
Популярные приемы:
Добавление 4px прозрачного поля к изображению и придание it
background-position: rightДобавление 4px
margin-rightк элементу (работает в некоторых ситуациях, не работает в других)Использование jQuery для определения веса элемента и настройки положения изображения (фу!)
0
Вы можете использовать проценты:
table.
