HTML \ CSS: фон позиционирование изображения

я знаю, что мы можем позиционировать как этотHTML CSS: фон позиционирование изображения

background:url(../images/bg.jpg) top left;

, но я хочу сделать это

расположите фон в верхней центральной и переместить его на 400 пикселей направо ... как это можно сделать

источник

2011-01-30 Moon

Давайте ждать других браузеров, чем Firefox для реализации 'известково()', к примеру, я думаю, что это будет работать в Firefox: 'фон-позиции: сверху -moz-известково (50% - 400px);' , См. Https://developer.mozilla.org/en/CSS/-moz-calc – Harmen

Edit: Это был упрям, чтобы сделать в IE, поэтому я добавил некоторую дополнительную информацию, чтобы заставить его работать там Что ж.

Edit2: Также используется приложение SuperPreview Microsoft, чтобы сделать эту работу в IE6. Протестировано в FF3.6 и IE8, а также IE6 в SuperPreview.

Используйте следующий CSS гнездиться ваш объект:

body { 
    margin:  0px; 
    padding: 0px; 
    text-align: center; 
} 

.parentDiv { 
    margin:  0 auto; 
    text-align: left; 
    width:  2px; /* non-zero width */ 
} 

.childDiv { 
    position: relative; 
    text-align: left; 
    background-image: url("../images/bg.jpg"); 
    left: 399px !important; /* !important is not honored by IE6 */ 
    left: 600px;   /* overridden in all but IE6 */ 
    width: 300px; 
    height: 300px; 
}

Вы бы код, подобный этому (это важно установить DOCTYPE строгой):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
... 
<div class=parentDiv><div class=childDiv>Child Content</div></div>

Изменить значение width и height в childDiv на основе вашего изображения.

источник

2011-01-30 16:49:42

эта техника может работать ... и я бы сделал это сам, но это не решение ... потому что вы рассматриваете переменную высоту страницы и кросс-браузерное решение для размер div, особенно для старых браузеров, таких как ie5, и особенно для моей страны, где ie6 пользователей составляют 22,5% от общего числа – Moon

Ответ, который я предоставил, работает в современных браузерах. Если вам нужно специальное решение для IE5/6, вы должны были указать это в своем вопросе. В любом случае, это будет очень уродливый взлом, чтобы заставить это работать в этих браузерах. –

Хорошо, я использовал копию Microsoft SuperPreview для проверки этого в IE6. Не очень гибко тестировать эту программу, но, похоже, она достигла желаемого эффекта. Соответственно обновить ответ. –

Этого нельзя сделать в классическом формате background-position.

Вам нужно будет использовать JavaScript для вычисления ширины элемента и соответственно установить позицию или дать изображению прозрачное пространство слева, чтобы нажать его вправо. Это может быть самым простым решением.

источник

2011-01-30 16:38:02

возможно с полями? edit: nevermind – JCOC611

@JCOC yup, это тоже хорошая идея, если вы можете работать с элементом обертки –

Или дополнительный элемент, абсолютно позиционированный в центр, с шагом, отталкивающим его вправо. – reisio

Это может быть сделано с фона клипа и фона происхождения, но это в будущем: http://www.css3.info/preview/background-origin-and-background-clip/

Обертка DIV или JavaScript должен это делать.

источник

2011-01-30 16:46:15 madr

Я хотел бы попробовать манипулировать с <DIV> с позиционированием и Z-индекс

источник

2011-01-30 16:47:41 giacoder

Это может быть проще с Javascript.

Pseudocode: 
    Read the width of the enclosing element 
    Compute its center 
    Offset the center by desired amount of pixels 
    Set this new value as the position of the background image

источник

2011-02-02 06:29:42 iGbanam

HTML \ CSS: фон позиционирование изображения

ответ

Смежные вопросы