Заставить фоновое изображение начинаться справа, а не слева — Общее — Forum
partlysean
1
Привет всем, ищу помощи по позиционированию фонового изображения.
У меня есть кнопка со значком в фоновом режиме. Чтобы дать ему немного отступа вправо, я позиционирую его на 90% слева. Однако, когда метка кнопки становится очень длинной, она перекрывается и легко ломается. Если бы я мог вместо этого расположить его относительно справа элемента на фиксированном расстоянии в пикселях, это было бы здорово.
. Планируется ли переключение между левым/правым и верхним/нижним в свойстве фонового положения? Спасибо!Озон
2
Можно ли настроить стрелку так, чтобы она всегда находилась на расстоянии 10 пикселей справа от границы кнопки?
частично морской
3
@Ozone Да, это то, что я надеюсь сделать, но, к сожалению, я могу расположить фоновое изображение стрелки только слева от кнопки.
В CSS я бы написал background-position: right 32px center; , центрируя его по вертикали и на 32 пикселя справа. Но в визуальном редакторе Webflow я могу позиционировать только слева.
Озон
4 Это расстраивает
@sarahfrison Ничего, если я отмечу эту тему как #feedback:bugs ?
1 Нравится
(Сара — эксперт/модификатор Webflow)
5
@partlysean Какие настройки вы используете для этого? Я собрал быструю кнопку, и вы можете использовать эту настройку, чтобы расположить ее с правой стороны
image1600×789 76,9 КБ
@Ozone В зависимости от ответа ts, это, вероятно, не ошибка, либо это исправляет ее, либо это функция, которую веб-поток еще не поддерживает изначально.
частично морской
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% позицию.
Гораздо лучше. Не используйте кнопки
link div, поместите внутрь два объекта — текст и иконку. Это даст вам больше гибкости.
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
Согласен! Это должно просто работать.
Джонатан_Роншольдт (Джонатан Рёншольдт)
15
Ничего нового в этом нет?
Пабло_Кортес (Пабло Кортес)
16
Я не совсем понимаю, в чем проблема с этим постом. @dram только что дал действительно хорошие решения. Если эти решения не сработали в вашем случае, просто добавьте свойства CSS во встроенный элемент или в раздел пользовательского кода настроек страницы.
Я только что сделал это с примером @partlysean, и он отлично работает. Теперь это дополнительный шаг, но вставку можно добавить в контейнер вместе с кнопкой, и она станет всего лишь одним повторно используемым элементом.
Скриншот 2021-04-14 в 12.01.28 PM801×347 11,4 КБ
ахоролец (Андрей)
17
Проблема в том, что когда вы размещаете фон справа от пользовательского интерфейса, вы ожидаете, что он будет на 0% справа, а не на 100% слева. Есть ли веская причина, по которой это делается именно так? Я не мог придумать ни одного.
Конечно, всегда есть обходной путь, но в данном случае это промежность для неправильно сделанного пользовательского интерфейса.
Background Position
Опубликовано: 21 ноября 2014 г.