Как переместить бэкграунд в лево в css

Задает начальное положение фонового изображения, установленного с помощью свойства background-image . В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

CSS2.1

CSS3

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

background-position

CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

Синтаксис

Свойство background-position указывается в виде одного или нескольких значений , разделённых запятыми.

Значения

Синтаксис 1-значения: значение может быть:

Значение ключевого слова center , которое центрирует изображение.
Одно из значений ключевых слов top , left , bottom , right . Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края. или . Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.

Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:

Одно из значений ключевых слов top , left , bottom , right . Если здесь указаны left или right , то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom , то оно определяет Y, а другое значение определяет X. или . Если другое значение является left или right , то оно определяет Y, относительно верхнего края. Если другое значение top или bottom , то оно определяет X, относительно левого края. Если оба значения или , то первое определяет X, а второе Y.

Если одно значение top или bottom , то другое значение не может быть top или bottom .
Если одно значение является left или right , то другое значение не может быть left или right .

Это означает, например, что top top и left right являются недействительные.

Официальный синтаксис

Примеры

Каждый из этих примеров использует свойство background для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

Как сместить изображение фона?

допустим изображение 1600х1000 на сайте отведенно для него высота 500пиксилей и отображается оно не полным как можно подвинуть его вверх что бы нижняя часть была видна?

Первое значение — расположение фонового изображения по оси х, 50% — оно будет по центру, второе значение — расположение по оси y, 100% — будет от нижнего края элемента.

К примеру: я взял изображение большого размера вот оно и есть блок как требуется в ширину 500px и нам нужно сместить фон в нижний правый край то делается это так :

Если нужно, чтобы изображение полностью влезло, то нужно использовать background-size: contain , но обычно используют background-size: cover , изображение немного обрежется, но оно займет всю площадь контейнера.

Вот тут все подробно расписано и наглядно показано.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Background-position: позиционирование фона

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .

Значения background-position

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

Ключевые слова для горизонтального позиционирования

left — фоновый рисунок прилеплен к левой стороне элемента;
center — фоновый рисунок расположен в центре оси x;
right — фоновый рисунок прилеплен к правой стороне элемента.

Ключевые слова для вертикального позиционирования

top — фоновый рисунок прилеплен к верхней стороне элемента;
center — фоновый рисунок расположен в центре оси y;
bottom — фоновый рисунок прилеплен к нижней стороне элемента.

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:

Значения можно менять местами — они будут работать так же.

Если вы установили повтор фона с помощью свойства background-repeat , то background-position будет определять, от какой точки будет начинаться дублирование изображения.

Для позиционирования фона можно использовать и одно значение для двух осей сразу:

Точные значения в единицах измерения CSS

Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

Процентные значения

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

Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:

Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:

Важно: фоновые изображения и печать

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

Поддержка браузерами

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

Далее в учебнике: background-attachment — фиксация фона.

Похожие публикации:

Как прижать блок к правому краю css
Как применить css к определенному элементу
Как прописать стили css в html
Как работать с arduino

CSS: управляющее пространство между маркером и

Поместите его содержимое в span относительное положение, тогда вы можете контролировать пространство с помощью left свойства span .

li span  position: relative; left: -10px; >

Выполнить фрагмент кода Скрыть результаты

Просто для пояснения, тег может быть семантическим, когда ему назначается класс, например 123-456-7890 неявно семантический.

+1 за фактический ответ на вопрос парня;) (хотя в промежутке в идеале в идеале должен быть класс для хорошей практики защиты будущего, а также семантики: если в будущем у какого-либо javascript или разработки новых функций и т. Д. Была хорошая причина добавить дополнительные промежутки к вашему контенту, вещи могут запутаться)

в Firefox не отображается должным образом текст перекрывает пули с помощью этого трюка

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

@ Уолл Хммм. Это старый комментарий, и я не уверен , концерн — Если это так ли могут использовать id или class тег, посмотри на W3C . Если вопрос заключается в том, может ли он передать смысловой смысл, посмотрите этот ответ . Технически, тег сам по себе является несемантическим встроенным элементом, но в некотором смысле обеспечивает большую гибкость при его повторном использовании. В настоящее время, я полагаю, можно использовать inline-block дескриптор, чтобы позволить гораздо больший диапазон параметров форматирования.

(1) Используйте фоновое изображение:

 type="text/css"> li  list-style-type:none; background-image:url(bullet.png); >   Some text

Вы можете использовать любое изображение для пули
Вы можете использовать CSS background-position для позиционирования изображения практически в любом месте по отношению к тексту, используя пиксели, ems или%

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

 type="text/css"> ul padding-left:1em> li padding-left:1em>   Some text

Нет изображения = 1 файл меньше для загрузки
Регулируя дополнение на
, вы можете добавить столько , сколько заемных горизонтального пространства между маркером и текстом , как вам нравится
Если пользователь увеличивает размер текста, интервал и размер маркера должны пропорционально масштабироваться

Невозможно переместить маркер ближе к тексту, чем браузер по умолчанию
Ограничено формами и размерами встроенных типов маркеров CSS
Пуля должна быть того же цвета, что и текст
Нет контроля над вертикальным расположением пули

(3) обернуть текст в дополнительный элемент

Нет изображения = 1 файл меньше для загрузки
Вы получаете больший контроль над положением маркера, чем с опцией (2) — вы можете переместить его ближе к тексту (хотя, несмотря на все мои усилия, кажется, вы не можете изменить вертикальное положение, добавив padding-top к . Кто-то может иметь Обходной путь для этого, хотя . )
Пуля может быть другого цвета для текста
Если пользователь увеличивает размер текста, маркер должен масштабироваться пропорционально (при условии, что вы задаете отступы и поля в ems, а не в px).

Требуется дополнительный не семантический элемент (это, вероятно, приведет к потере большего количества друзей в SO, чем в реальной жизни;), но это раздражает тех, кому нравится, когда их код является максимально компактным и эффективным, и это нарушает разделение представления и контента. что HTML / CSS должен предложить)
Нет контроля над размером и формой пули

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

Отличный ответ. Чтобы # 2 работал, убедитесь, что вы поддерживаете свою позицию стиля списка в outside .

Элемент span является исправлением для меня. Я ответил +1 только потому, что предпочел отрицательную маржу абсолютному позиционированию — без веской причины.

Если у вас есть текст, который переносит строки, я обнаружил, что мне нужно было добавить его display: block; к элементу span, чтобы обернутый текст также выстроился в линию (я также использовал теги привязки вместо интервалов)

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

Я бы НИКОГДА не использовал фоновое изображение для этого. Вы всегда можете использовать элемент: before с содержанием: «•»; затем вы используете отступ и абсолютную позицию перед элементом для управления им.

Это должно сделать это. Обязательно поставьте свои пули наружу. Вы также можете использовать псевдоэлементы CSS, если вы можете удалить их в IE7 вниз. Я действительно не рекомендую использовать псевдоэлементы для такого рода вещей, но это помогает контролировать расстояние.

ul  list-style: circle outside; width: 100px; > li  padding-left: 40px; > .pseudo, .pseudo ul  list-style: none; > .pseudo li  position: relative; > /* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */ .pseudo li:before  content: '\2192'; position: absolute; left: 0; >

  Any Browser really  List item  List item  List item      class="pseudo"> IE8+ only  List item  List item with two lines of text for the example.  List item

Выполнить фрагмент кода Скрыть результаты

Я не могу поверить, что этот ответ не принят. Это 100% CSS, он не добавляет лишних элементов , и это заставило меня окончательно понять, почему существует внутренняя / внешняя опция! (и это принятый ответ на упомянутый повторяющийся вопрос . )

Использование list-style-position: outside и заполнение LI элементов позволяет увеличить расстояние между точками маркера, но оно по-прежнему не работает за пределами указанного в браузере смещения. Смотрите это JS Bin .

чтобы свести к минимуму вынужденное браузером расстояние между точкой маркера и
контентом. То есть увеличивайте, padding-left как показано выше, чтобы увеличить расстояние, и уменьшайте, text-indent чтобы уменьшить расстояние между точкой маркера и содержимым по желанию.

Другой вариант — использовать псевдоэлементы: before и установить для содержимого то, что вам нравится. оттуда расположите псевдоэлементы по желанию.

Старый вопрос, но здесь хорошо работает псевдоэлемент before.

 li:before  content: ""; display: inline-block; height: 1rem; // or px or em or whatever width: .5rem; // or whatever space you want >

Он работает очень хорошо и не требует много дополнительных правил или HTML.

  Some content  Some other content

Хороший и простой ответ. Я бы добавил, что настройка margin-left: -5px (или любое
Примечание: это не поддерживает висячие отступы
Потрясающий ответ, это отлично сработало при минимальном объеме работы! Спасибо!

Для list-style-type: inline :

Это почти так же, как ответ DSMann8, но меньше кода CSS.

Вам просто нужно

 li:before  content: ""; padding-left: 10px; >   Some content

Это list-style-position: inside тоже работает , и это здорово!

Вы можете использовать padding-left атрибут в элементах списка ( не в самом списке!).

Обратите внимание, что это работает, только если для параметра list-style-position установлено значение по умолчанию outside .

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

Использование text-indent для li работает лучше всего.

отступ текста: -x px; переместит пулю ближе к li и наоборот.

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

Это ведет себя странно на Chrome. Привязка к небольшому месту в -5px;

Вот еще одно решение с использованием css counter и псевдоэлементов. Я нахожу это более элегантным, так как он не требует использования дополнительной разметки HTML или классов CSS:

ol, ul  list-style-position: inside; > li  list-style-type: none; > ol  counter-reset: ol; //reset the counter for every new ol > ul li:before  content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces > ol li:before  counter-increment: ol; content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces >

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

Как переместить текст в лево в HTML?

3 ответаЭто еще один подход для людей (таких как я), которые не входят в свойство position CSS: #my-text < float: right; margin-right: 100px; >/* or an inline style */ style=»float: right; margin-right: 100px;» . Используйте относительное положение: #yourText

Как сдвинуть текст в лево?

Или выделите выделенный текст и нажмите Tab, чтобы переместить его вправо, или Shift + Tab, чтобы переместить его влево.

Как перемещать текст в CSS?

Если вы хотите переместить текст вниз, используйте padding-top. line-height может работать в зависимости от вашей ситуации. Проблема с высотой строки может быть, если у вас есть фоновый цвет, а затем он также будет расширяться.

Как сделать текст посередине страницы в HTML?

Выравнивание текста в HTML по центру и по ширинеalign=»left» – определяет выравнивание текста слева (по умолчанию).align=»center» – выравнивает текст по центру.align=»right» – выравнивает текст справа.

Как расположить текст по правому краю?

Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Выравнивание текстаКод HTMLОписание

Текст

Выравнивание по левому краю.

Текст

Выравнивание по правому краю.

Текст

Выравнивание по ширине.•23 сент. 2010 г.

Как выровнять текст по правому краю HTML?

Для этого используется атрибут align:align=”right” – по правому краю;align=”left” – по левому краю;25 мая 2015 г.

Как выровнять текст в HTML Саблайм текст 3?

Выберите Tools → Command Palette ( CTRL + SHIFT + P или CMD + SHIFT + P ) и наберите htmlprettify .Нажмите CTRL + SHIFT + H (или CMD + SHIFT + H если у вас Mac).Кликните правой кнопкой мыши на выделенном фрагменте HTML/CSS/JS Prettify → Prettify Code.•1 мар. 2016 г.

Как перенести фоновый blur из фигмы на css?

введите сюда описание изображения

Сделал макет на фигме(первый) и не понимаю как в css реализовать blur, который за изображением в css. Помогите пожалуйста

Отслеживать
задан 30 янв 2021 в 15:22
Shdbd Susjebj Shdbd Susjebj
21 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

А почему бы не воспользоваться свойством box-shadow ? Пример:

body div

Отслеживать
ответ дан 30 янв 2021 в 15:54
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
Спасибо. Я просто только начинаю, поэтому многого не знаю.
30 янв 2021 в 17:41

html
css
вёрстка
figma

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Как переместить бэкграунд в лево в css