HTML \ CSS: расположение фонового изображения - PullRequest
Новая
       24

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

0 голосов
/ 30 января 2011

я знаю, что мы можем расположить вот так 

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

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

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

Ответы [ 5 ]

1 голос
/ 30 января 2011

В настоящее время это невозможно сделать с использованием классической записи background-position.

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

0 голосов
/ 02 февраля 2011

Это может быть проще с 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
0 голосов
/ 30 января 2011

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

Edit2: Также использовал приложение Microsoft SuperPreview, чтобы сделать это в 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 на основе вашего изображения.

0 голосов
/ 30 января 2011

Я бы попробовал манипулировать с

позиционированием и z-index
0 голосов
/ 30 января 2011

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

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

...