Image position background css: CSS background-position property

< html >

< голова >

     < название > CSS | Свойство background-position title >

     < стиль >

     корпус {

         background-image: url(

         background-repeat: no-repeat;

         9003 8 background-attachment: фиксированный;

         background-position: center top;

     }

     стиль >

головка >

9 0037 < корпус >

корпус >

HTML >

< html >

< голова >

     < название > CSS | Свойство background-position заголовок >

     < стиль >

     body {

         background-image: url(

         background-repeat: нет -повтор;

         background-attachment: фиксированный;

         background-position: center center;

     }

     стиль >

9003 7 головка >

< корпус >

body >

html >

< html >

< головка >

     < title > CSS | background-position Свойство title >

     < style >

900 37      body {

         background-image: url(

         background-repeat: без повтора;

         background-attachment: исправлено;

         background-position: по центру снизу;

     }

     стиль > 900 05

головка >

< корпус >

корпус >

html >

< html >

< головка >

     < 90 037 заголовок > CSS | background-position Свойство title >

     < style >

900 37      body {

         background-image: url(

         background-repeat: без повтора;

         background-attachment: исправлено;

         background-position: справа вверху;

     }

     стиль > 900 05

головка >

< корпус >

корпус >

html >

< html >

< голова >

     < название > CSS | background-position Свойство title >

     < style >

900 37      body {

         background-image: url(

         background-repeat: no-repeat;

         background-attachment: фиксированный; положение: справа по центру;

     }

     стиль > 9003 8

головка >

< корпус >

корпус Вывод :

background-position: справа внизу; : Это свойство используется для установки изображения в правом нижнем положении.

Пример: Этот пример иллюстрирует использование свойство background-position , в котором значение позиции устанавливается в правую нижнюю позицию.

HTML

Вывод:

background-position: 25 % 75%; : Это свойство используется для установки изображения на 25% слева и 75% сверху.

Примечание: Для обозначения x%y% здесь x% обозначает положение по горизонтали, а y% обозначает положение по вертикали относительно исходного положения, т. е. слева вверху.

Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции задается в виде процента.

HTML

Вывод:

9 0005

background-position: 30px 80px; : Это свойство используется для установки изображения на расстоянии 30 пикселей слева и 80 пикселей сверху.

Примечание : Для обозначения x-pos y-pos здесь единицы представлены в пикселях или любых других единицах CSS.

Пример: Этот пример иллюстрирует использование background-position , где значение позиции задается в виде пикселей.

HTML

Вывод:

Поддерживаемые браузеры: Браузер, поддерживаемый фоновой позицией 90 004, перечислены ниже: 

• Google Chrome 1. 0
• Internet Explorer 4.0
• Microsoft Edge 12.0
• Firefox 1.0
• Opera 3.5
• Safari 1.0
9167 9


Заставить фоновое изображение начинаться справа, а не слева - General - Forum

partlysean

20 января 2020 г., 21:37 1

Привет всем, ищу помощь по позиционированию фонового изображения.

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

Снимок экрана 20 января 2020 г., 33:33:25 PM1114×140 6,04 КБ




Снимок экрана, 20 января 2020 г.

, 33:42 PM482×970 37,2 КБ

Любой предложения? Планируется ли переключение между левым/правым и верхним/нижним в свойстве фонового положения? Спасибо!

Озон 20 января 2020 г., 23:08 2

Можно ли настроить стрелку так, чтобы она всегда находилась на расстоянии 10 пикселей справа от границы кнопки?

частично морской 21 января 2020 г., 15:32

3

@Ozone Да, это то, что я надеюсь сделать, но, к сожалению, я могу расположить фоновое изображение стрелки только слева от кнопки.

В CSS я бы написал background-position: right 32px center; , центрируя его по вертикали и на 32 пикселя справа. Но в визуальном редакторе Webflow я могу позиционировать только слева.

Озон 21 января 2020 г., 15:36

4

Это расстраивает
@sarahfrison Ничего, если я отмечу эту тему как #feedback:bugs ?

1 Нравится

Сарафрисон (Сара - эксперт/модификатор Webflow) 28 января 2020 г., 20:15 5

@partlysean Какие настройки вы используете для этого? Я собрал быструю кнопку, и вы можете использовать этот параметр, чтобы расположить ее справа пока не поддерживает изначально.

частично морской

30 января 2020 г., 17:05 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.

Спасибо за помощь!

драм (Алекс Драм) 30 января 2020 г., 19:46 7

Это можно исправить двумя способами.

1. Сделайте изображение для кнопки так, чтобы оно включало пустое пространство справа от графического элемента и использовало 100% позицию.

2. Гораздо лучше. Не используйте кнопки для ваших кнопок. Используйте link div , поместите внутрь два объекта — текст и иконку.

   Это даст вам больше гибкости.

2 лайков

30 января 2020 г., 20:02 8

Спасибо за предложения, @dram! Это определенно сработает, и я пробовал делать и то, и другое, но я действительно надеялся заставить это работать в одном элементе.

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

Вариант 2 был бы намного более гибким, но он не так прост, как применение простого комбинированного класса к кнопке. Создание пользовательской ссылки, как вы предлагаете, для меня не имеет большого значения, но поскольку мы привлекаем к проекту больше дизайнеров, это вводит дополнительный уровень обучения, чтобы сказать: «перетащите элемент кнопки, чтобы разместить кнопку на сайте, если только это не кнопка со значком, и в этом случае вам нужно использовать блок ссылок с вложенным div».

Я буду продолжать думать об этом, а пока я мог бы просто написать какой-нибудь пользовательский CSS, который нацелен на классы комбо-значков кнопок, чтобы вручную переопределить положение фона.

драм (Алекс Драм) 30 января 2020 г., 20:56 9

Если ваши дизайнеры действительно неопытны, вам необходимо создать отдельную страницу с UI Kit. Вы просто скажете им скопировать кнопку «отсюда», изменить сам текст или значок и покончить с этим

РубенМ 13 февраля 2020 г., 12:30 10

Привет, у меня такая же проблема. Я пытался сделать ссылку div, но это мешает возможности изменить значок при наведении на фоновое изображение. Если я использую значок стрелки в качестве дочернего элемента, я не могу изменить внешний вид при наведении курсора на «ссылку» (родительский элемент значка).

Надеюсь, самым простым решением будет добавить возможность изменять «правое» значение, а не только верхнее и левое. Это также доступно в общем css…

частично морской 13 февраля 2020 г., 19:37 11

Я хочу поддержать эти мысли, @RubenM. Чтобы покрыть свои основы, я создавал кнопки, используя метод, упомянутый @dram (блок ссылок + дочерние элементы для метки и значка), и хотя технически работает как , он не решает 100% случаев использования.

Я не могу отредактировать кнопку отправки формы, например, чтобы иметь отдельные элементы метки и значка, поэтому, если я хочу иметь выровненный по правому краю значок с соответствующим интервалом внутри кнопки отправки, мне не повезло. То же самое касается других «родных» элементов Webflow, таких как раскрывающиеся списки и поля выбора. И, как вы указали, вы не можете изменить внешний вид значка при наведении курсора на эту пользовательскую кнопку, не создавая сложный триггер элемента + взаимодействие. Я бы предпочел сделать это, используя простой эффект перехода к элементу.

Я думаю, это мое разочарование: Webflow якобы является графическим интерфейсом для CSS, и в этом посте я прошу, чтобы этот графический интерфейс поддерживал собственное свойство CSS, которое в настоящее время отсутствует. Создание пользовательских кнопок на самом деле не является решением или полезным обходным путем, поэтому я надеюсь, что Webflow поддерживает возможность переключения положения фона между левым/правым и верхним/нижним.

радость (Джо) 23 сентября 2020 г., 2:08 12

Присоединяясь к вечеринке здесь, я согласен с вашим последним комментарием @partlysean — меня расстраивает, что GUI на самом деле не справляется с тем, что может делать CSS. Я ненавижу добавлять CSS в пользовательский код, чтобы решать подобные проблемы. Окно графического интерфейса «позиция» должно обновлять поля справа, поэтому при нажатии правой опции значение должно обновляться до «справа»: 0% , а не «слева»: 100%

Я использовал рамку на своем объекте, чтобы создайте правильный интервал, но это взлом веб-потока и беспорядок.

спирелли 25 января 2021 г., 14:51 13

То же самое, должно работать. Мне нужно разместить значок справа от текстовых ссылок в элементе Rich Text. И если бы это могло работать только с правильно расположенным фоновым изображением и некоторыми отступами, это было бы хорошо. Теперь я застрял!

Джонатанронсхольдт (Джонатан Роншольдт) г. 9 марта 2021 г., 16:39 14

Согласен! Это должно просто работать. Раздражающий. Изменение того, должно ли фоновое изображение быть выровнено слева или справа, является очень простым css.

Джонатан_Роншольдт (Джонатан Роншольдт) 14 апреля 2021 г., 15:31 15

Ничего нового в этом нет?

Пабло_Кортес (Пабло Кортес) г. 14 апреля 2021 г., 16:17 16

Я не совсем понимаю, в чем проблема с этим постом. @dram только что дал действительно хорошие решения. Если эти решения не сработали в вашем случае, просто добавьте свойства CSS во встроенный элемент или в раздел пользовательского кода настроек страницы.

No related posts.


alexxlab Автор записи

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт