Я хотел бы поместить изображение в качестве фона веб-страницы, но смещать его на некоторое количество пикселей по отношению к центру.
Как я могу это сделать?
Я хочу:
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
но вместо 25% я хочу что-то вроде линии "center - 50px". Есть ли какое-либо решение для этого?
Я считаю, что у меня есть решение, которое достигает желаемого:
Фоновое изображение (в частности, фона страницы), смещенное на несколько пикселей относительно центра.
Это работает с использованием только HTML и CSS - не требуется javascript.
Теперь это можно легко достичь, используя background-position и calc как блок CSS.
Следующий CSS достигнет того же результата, что и предыдущее решение (см. "Исходное решение" ниже):
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
Примечание. Не используйте этот метод, если вам нужна поддержка устаревших версий IE.
#background-container {
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
}
То, что это делает, перемещает весь контейнер по горизонтали на указанное количество (в данном случае налево 100px). Поскольку фоновое изображение центрировано относительно контейнера, оно перемещается влево с контейнером.
Заполнение исправляет 100px пустого пространства, которое будет отображаться справа от контейнера в результате перемещения. Фоновые изображения отображаются через прописку). Поскольку браузеры используют значение border-box вместо значения содержимого по умолчанию для вычисления размера фона и позиционирования, фоновое изображение эффективно перемещается вправо на 50 пикселей - на половину расстояния от прокладки. (Спасибо ErikE за разъяснение).
Таким образом, ваше смещение/заполнение должно быть в два раза больше требуемого расстояния смещения.
Я подготовил образец страницы для вас здесь: http://www.indieweb.co.nz/testing/background-offset-center.html
Имейте игру с изменением размера окна. Вы увидите, что фиолетовое и синее фоновое изображение (наложенное на более глубокое фоновое изображение, обозначающее центр страницы) остается ровно 50 пикселей (половина смещения/расстояния заполнения) слева от центра страницы.
Использование background-position: center; совпадает с background-position: 50% 50%;.
Итак, вы можете использовать calc для выполнения простой математики в CSS в качестве замены любого значения длины, например:
background-position: calc(50% - 50px) 50%;
Центрирует фоновое изображение, но сдвиньте его на 50 пикселей влево.
Итак, вы хотите, чтобы он был центрирован сдвинутыми 50 пикселями влево. Я бы добавил 50 пикселей к изображению в виде прозрачного пространства, если только вы не имеете дело с абсолютными размерами.
Нет очевидного ответа CSS. Вам нужно будет либо использовать JavaScript для вычисления значений, либо сделать что-то сложное. Вы можете попробовать сохранить background-position:25% center и добавить position:relative;left:-50px или margin-left:-50px, но они могут не работать в зависимости от того, как вы используете элемент DOM.
Единственный метод, который я нашел для этого, - это иметь фон внутри другого div, а затем использовать javascript для изменения...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
если вы знаете ширину изображения, вы можете использовать это:
background-position: (BgWidth - 50)px 0px;
Обратите внимание, что вы не можете иметь это так, то есть вам нужно вычислить (BgWidth - 50), а затем записать там номер.
Если вы не знаете ширину, вы можете использовать Javascript (с или без jQuery), а затем использовать это:
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
Хороший ответ Люк,
еще одна вещь, если ширина вашего блока больше разрешения экрана, вы должны поместить свой блок в другой контейнер и сделать это:
#container{
position:relative;
overflow:hidden;
}
#shadowBox{
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
position:absolute: /*this is needed*/
}
Мой ответ должен быть слишком поздним, но каким-то образом я нашел другое решение.
padding-left: 100px; /* offset you need */
padding-right: 100%;
или
padding-right: 100px;
padding-left: 100%;
Примеры имеют тот же эффект.
единицы должны быть одинаковыми, поэтому при указании пикселей для позиции x положение y должно быть также в пикселях.
пример:
background-position: 25% 50%;
EDIT: Я просто перечитываю ваш запрос, и единственный способ сделать это - либо знать абсолютную позицию (если внешние элементы не являются динамическими/гибкими), либо если вы не знаете позицию, возможно, используйте javascript для установки ее положение.