Я думаю, что ответ отрицательный, но можете ли вы разместить фоновое изображение с помощью CSS, так что это фиксированное количество пикселей вправо?
Если я установил background-position значения x и y, кажется, что они дают только фиксированные корректировки пикселей слева и сверху соответственно.
background-position: right 30px center;
Он работает в большинстве браузеров. См. http://caniuse.com/#feat=css-background-offsets для полного списка.
Дополнительная информация: http://www.w3.org/TR/css3-background/#the-background-position
Можно использовать атрибут border как длину справа
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
Существует один способ, но он не поддерживается в каждом браузере (см. покрытие здесь)
element {
background-position : calc(100% - 10px) 0;
}
Он работает в каждом современном браузере но возможно, что IE9 сбой. Также нет покрытия для = < IE8.
Насколько я знаю, спецификация 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 изображения в содержащийся элемент.Попробуйте следующее:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Обратите внимание, что приведенный выше код перемещает весь элемент (а не только фоновое изображение) 5px справа. Это может быть хорошо для вашего дела.
Вы можете сделать это в CSS3:
background-position: right 20px bottom 20px;
Он работает в Firefox, Chrome, IE9 +
Источник: MDN
Обходной путь изображения с прозрачными пикселями справа, чтобы служить в качестве правого края.
Обходной путь к изображению для него - создание PNG или GIF-изображения (форматы файлов изображений, поддерживающих прозрачность), который имеет прозрачную часть справа от изображения, точно равную количеству пикселей, которые вы хотите дать (например: 5px, 10px и т.д.)
Это хорошо работает как по фиксированной ширине, так и по ширине в процентах. Практически хорошее решение для заголовков аккордеона с изображением стрелки "плюс/минус" или "вверх/вниз" на заголовке справа!
Даунсайд: К сожалению, вы не можете использовать JPG, если фоновая часть контейнера и фоновый цвет фонового изображения CSS не имеют одинакового плоского цвета (без градиента/виньетки), в основном белого/черного и т.д.
Если вы случайно наткнулись на эту тему в наши дни современных браузеров, вы можете использовать псевдокласс: после того, как практиковать что-нибудь с фоном.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
этот css помещает фон в правый нижний угол элемента .container с пространством 20px с правой стороны.
См. эту скрипту, например http://jsfiddle.net/h6K9z/226/
наиболее подходящий ответ - это новый четырехзначный синтаксис для фонового положения, но пока все браузеры поддерживают его, ваш лучший подход представляет собой комбинацию более ранних ответов в следующем порядке:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
Просто поместите пиксельное дополнение в изображение - добавьте 10px или что-то другое к размеру холста изображения в фотошопе и выровняйте его прямо в CSS.
Я пытался выполнить аналогичную задачу, чтобы всегда показывать стрелку раскрывающегося списка справа от заголовка таблицы, и придумал это, похожее на работу в Chrome и Firefox, но сафари говорили мне, что это недопустимое свойство.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
После небольшого беспорядка в инспекторе я придумал это кросс-браузерное решение, которое работает в IE8 +, Chrome, Firefox и Safari, а также гибкие проекты.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Вот код того, как он выглядит и работает. Codepen написан с SCSS - http://cdpn.io/xqGbk
Другим решением, о котором я не упоминал, является использование псевдоэлементов, и я полагаю, что это решение будет работать с любым браузером, совместимым с CSS 2.1 (≥ IE8, ≥ Safari 2,...), и он также должен быть отзывчивым:
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Пример: Элемент, например. квадратный размер 100px (без учета границ) имеет отступы 10px, а фоновое изображение должно отображаться внутри правого заполнения. Это означает, что псевдоэлемент представляет собой квадрат размером 80 пикселей. Мы хотим привязать его к правой границе элемента с правом: -10px;. Если мы хотим иметь фоновое изображение на расстоянии 5 пикселей от правой границы, нам нужно придерживать псевдоэлемент 5px от правой границы элемента с правом: -5px;... Проверьте это для себя: http://jsfiddle.net/yHucT/
Если контейнер имеет фиксированную высоту: Tweek проценты (background-position), пока они не будут правильно установлены.
Если контейнер имеет динамическую высоту: Если вы хотите отступы между фоном и вашим контейнером (например, при вводе пользовательских стилей, выберите), добавьте дополнение к своему изображению и установите положение фона вправо или снизу.
Я наткнулся на этот вопрос, пока я пытался получить фон для окна выбора, чтобы он соответствовал 5 пикселям справа от моего выбора. В моем случае мой фон - это стрелка вниз, которая заменит основной значок выпадающего списка. В моем случае отступы всегда будут оставаться одинаковыми (5-10 пикселей справа) для фона, так что это легкая модификация, чтобы довести до фактического фонового изображения (делая его размеры на 5-10 пикселей шире с правой стороны.
Надеюсь, это поможет!
Вы можете поместить фоновое изображение в редакторе на x пикселей с правой стороны.
background: url(images_url) no-repeat right top;
Фоновое изображение будет располагаться в правом верхнем углу, но будет выглядеть как x пикселей справа.
Тонкие проценты слева немного хрупкие по моему вкусу. Когда мне нужно что-то вроде этого, я, как правило, добавляю мой стиль контейнера к элементу обертки, а затем применяю фон к внутреннему элементу с помощью background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
Класс .content-breakout не является обязательным и позволит вашему контенту поесть в дополнение, если это необходимо (значения отрицательных полей должны соответствовать соответствующим значениям в дополнении обертки). Он немного подробный, но работает надежно, не заботясь об относительном позиционировании изображения по сравнению с его шириной и высотой.
С тех пор, как этот вопрос был задан, он столкнулся с проблемой, но я просто столкнулся с этой проблемой, и я понял:
background-position:95% 50%;
Решение для отрицательных значений. Настройте прописку справа, чтобы переместить изображение.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Это работает в Chrome 27, я не знаю, действительно ли это или нет, или что с ним делают другие. Я был удивлен этим.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
Работает для всех реальных браузеров (и для IE9 +):
background-position: right 10px top 10px;
Я использую его для тем RTL WordPress. Пример: временный веб-сайт или настоящий веб-сайт будет скоро. Посмотрите на иконки на больших углах DIV.
Лучше всего background: url ('../images/bg-menu-dropdown-top.png') left 20px top no-repeat! important;
Если вы хотите указать только ось X, вы можете сделать следующее:
background-position-x: right 100px;