Как?CSS "Позиция: Абсолют" константа Margin-Top?Возможный? - PullRequest
Новая
       3

Как?CSS "Позиция: Абсолют" константа Margin-Top?Возможный?

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

Этот вопрос звучит просто, но я эксперт по CSS и думаю, что это невозможно (РЕДКО).

Можно ли использовать CSS для получения <div> постоянного верхнего поля, если у этого <div> нет фона (например, вы можете видеть сквозь него)?

По сути, я хочу, чтобы фоновое изображение было видно в верхних 100 пикселях сайта, чтобы даже при прокрутке вниз верхнее поле оставалось на месте.

Вы можете посмотреть живой код здесь:
http://www.codemyconcepthq.com/projects/2453/

Вот небольшая инфографика о том, что я пытаюсь сделать:
http://cl.ly/40bD

Спасибо!

Ответы [ 3 ]

4 голосов
/ 14 января 2011

Одним из решений, которое вы можете попробовать, является обрезка верхней части фона (это изображение: http://www.codemyconcepthq.com/projects/2453/images/bg-body.png), и вы устанавливаете его в качестве фона заголовка.

Поэтому, когда вы прокручиваете страницу вниз, содержимое будет идти под вашим заголовком, и вы не увидите его, потому что заголовок будет иметь фон.

Edit:

Вместо того, чтобы вырезать фон, как я сказал, просто установите фон заголовка на то же изображение, которое использовалось для основного фона. Это избавит браузер от необходимости загружать два изображения (что бесполезно, поскольку изображения одинаковы).

2 голосов
/ 14 января 2011

Глядя на код, я думаю, что лучшее, что вы можете сделать, это вставить еще один <div> <div id="header">, применить фоновое изображение <body> к <div id="header">, а затем применить полупрозрачное изображение к <div> ты положил внутрь. Затем прокручиваемый контент будет скрыт новым фоном <div id="header">.

Итак, HTML: 

<div id="header"><!-- Begin Header -->
    <div id="header-inner">
    </div>
</div>

И CSS: 

#header {
    background:url("../images/bg-body.png") no-repeat fixed center top #000000;
}

#header-inner {
    background:url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
}
1 голос
/ 14 января 2011

Вы можете добиться того же эффекта, поместив непрозрачный фон, который точно такой же, как фон за частью заголовка, в ту же самую область, и содержание (#wrapper в вашем случае?) Идет за этим.

...