Я думаю, что ответ - нет, но можете ли вы расположить фоновое изображение с помощью CSS, чтобы оно было фиксированным количеством пикселей от правого?
Если я устанавливаю background-position
значения x и y, кажется, что они дают фиксированные корректировки пикселей слева и сверху соответственно.
Ответы:
Это работает в большинстве браузеров. Смотрите: http://caniuse.com/#feat=css-background-offsets для полного списка.
Дополнительная информация: http://www.w3.org/TR/css3-background/#the-background-position
источник
Можно использовать атрибут
border
как длину справаисточник
Есть один способ, но он не поддерживается во всех браузерах (см. Покрытие здесь )
Он работает в любом современном браузере, но вполне возможно, что IE9 дает сбой . Также нет покрытия для = <IE8.
источник
background-position-x: calc(90%);
- то есть он просто вычитает 10% из 100%Насколько я знаю, спецификация CSS не обеспечивает именно то, что вы спрашиваете, конечно, за исключением выражений CSS. Исходя из предположения, что вы не хотите использовать выражения или Javascript, я вижу три хакерских решения:
background-repeat: repeat
илиrepeat-x
если выравнивается только ширина. Тогда появление чего-либо вx
пикселях справа так же просто, как иbackground-position: -5px 0px
.background-position
демонстрации особого поведения, которое лучше видно, чем описано здесь. Дать ему шанс. По сути,background-position: 90% 50%
правый край фонового изображения выровняется на 10% от правого края контейнера.position: relative
если он еще не установлен. Установите контейнер изображения наposition: absolute; right: 10px; top: 10px;
, очевидно, корректируя последние два, как вы считаете нужным. Поместите контейнер изображения div в содержащий элемент.источник
Попробуй это:
Обратите внимание, что приведенный выше код переместит весь элемент (не только фоновое изображение) на 5 пикселей справа. Это может быть хорошо для вашего случая.
источник
Вы можете сделать это в CSS3:
Работает в Firefox, Chrome, IE9 +
Источник: MDN
источник
Обход изображения с прозрачными пикселями справа, чтобы служить правым полем.
Обходной путь для этого же изображения - создать изображение в формате PNG или GIF (форматы файлов изображений, поддерживающие прозрачность), у которого прозрачная часть справа от изображения точно равна числу пикселей, для которого нужно задать правое поле ( например: 5px, 10px и т. д.)
Это хорошо работает одинаково для фиксированной ширины, а также ширины в процентах. Практически хорошее решение для заголовков аккордеона, имеющих изображение со стрелкой плюс / минус или вверх / вниз справа от заголовка!
Недостаток: К сожалению, вы не можете использовать JPG, если фоновая часть контейнера и цвет фона фонового изображения CSS не имеют одинаковый плоский цвет (без градиента / виньетки), в основном белый / черный и т. Д.
источник
Если вы случайно натолкнулись на эту тему в наши дни в современных браузерах, вы можете использовать псевдокласс: после, чтобы сделать что-нибудь практическое с фоном.
этот css поместит фон в правый нижний угол элемента ".container" с пробелом 20 пикселей на правой стороне.
Смотрите эту скрипку, например, http://jsfiddle.net/h6K9z/226/
источник
Наиболее подходящий ответ является новым синтаксисом четыре-значения фона позиции, но пока все браузеры не поддерживают его ваш лучший подход представляет собой сочетание предыдущих ответов в следующем порядке:
источник
Просто поместите пиксельные отступы в изображение - добавьте 10px или любой другой размер к размеру холста изображения в фотошопе и выровняйте его прямо в CSS.
источник
Я пытался выполнить аналогичную задачу, чтобы стрелка раскрывающегося списка всегда находилась справа от заголовка таблицы, и придумал, что, похоже, работает в Chrome и Firefox, но safari сообщал мне, что это недопустимое свойство.
После того, как я немного повозился с инспектором, я пришел к этому кросс-браузерному решению, которое работает в IE8 +, Chrome, Firefox и Safari, а также в адаптивных проектах.
Вот кодекс того, как это выглядит и работает. Codepen написан с использованием SCSS - http://cdpn.io/xqGbk
источник
Если вы хотите указать только ось X, вы можете сделать следующее:
источник
background-position: right -100px center;
Обратите внимание, что если вы опуститеy-position
его, он не будет работать правильно, потому что думает, что для чего нужны пиксели.Другое решение, о котором я не упоминал, - это использование псевдоэлементов, и я уверен, что это решение будет работать с любым браузером, совместимым с CSS 2.1 (≥ IE8, ≥ Safari 2, ...), и оно также должно быть адаптивным:
Пример : элемент напр. квадрат размером 100px (без учета границ) имеет отступ 10px, а внутри правого отступа должно отображаться фоновое изображение. Это означает, что псевдоэлемент представляет собой квадрат размером 80 пикселей. Мы хотим прикрепить его к правой границе элемента справа: -10px; , Если мы хотим, чтобы фоновое изображение находилось на расстоянии 5 пикселей от правой границы, нам нужно прикрепить псевдоэлемент на 5 пикселей от правой границы элемента справа: -5px; ... Проверьте это сами: http://jsfiddle.net/yHucT/
источник
Если контейнер имеет фиксированную высоту: передвигайте проценты (background-position) до тех пор, пока он не поместится правильно.
Если контейнер имеет динамическую высоту: если вы хотите заполнить отступ между фоном и контейнером (например, когда пользовательские стили вводят, выбирает), добавьте отступ к своему изображению и установите положение фона справа или снизу.
Я наткнулся на этот вопрос, когда пытался получить фон для поля выбора, например, в 5 пикселях справа от моего выбора. В моем случае мой фон - стрелка вниз, которая заменила бы основной значок выпадающего меню. В моем случае, отступы всегда остаются неизменными (5-10 пикселей справа) для фона, так что это легко модифицировать, чтобы привести к реальному фоновому изображению (делая его размеры на 5-10 пикселей шире с правой стороны.
Надеюсь это поможет!
источник
Вы можете расположить фоновое изображение в редакторе так, чтобы оно составляло x пикселей с правой стороны.
Фоновое изображение будет расположено в верхнем правом углу, но будет выглядеть как x пикселей справа.
источник
Изменение процентов слева немного хрупко на мой вкус. Когда мне нужно что-то подобное, я обычно добавляю свой стиль контейнера к элементу-обертке, а затем применяю фон к внутреннему элементу с помощью
background-position: right bottom
.content-breakout
Класс не является обязательным и позволит вашему содержанию есть в обивку при необходимости (отрицательные значения маржи должны соответствовать соответствующим значениям в обертке кожухах). Это немного многословно, но работает надежно, не заботясь об относительном положении изображения по сравнению с его шириной и высотой.источник
С тех пор, как был задан этот вопрос, это было слишком долго, но я просто столкнулся с этой проблемой и получил ее, выполнив:
источник
Решение для отрицательных значений. Отрегулируйте отступ вправо, чтобы переместить изображение.
источник
Это работает в Chrome 27, я не знаю, является ли он действительным или нет, или что другие браузеры делают с ним. Я был удивлен этим.
источник
Работает для всех реальных браузеров (и для IE9 +):
Я использую его для RTL тем WordPress. Смотрите пример: временный сайт или реальный сайт скоро будет. Посмотрите на значки больших правых DIVs.
источник
Лучше для всего фона: url ('../ images / bg-menu-dropdown-top.png') оставлено 20px top no-repeat! Важный;
источник