css позиционирование/цвет

Я хотел бы иметь весь серый фон с меньшим синим фоном внутри него.css позиционирование/цвет

Что-то вроде

<body> 
<div id= "background_1"> 
    <div id= "background_2"> 
    </div> 
</div> 
</body>

, а затем в CSS

#background_1 
{ 
background-color : gray; 
z-index : 1; 
} 
#background_2 
{ 
background-color : blue; 
z-index : 2; 
}

Может кто-нибудь помочь мне с этим? Я знаю, что это немного расплывчато, но я в основном хочу весь серый фон с меньшим синим прямоугольником на переднем плане.

источник

2012-02-18 Zack

Все в порядке с вашим кодом ... но для этого не требуется z-index.

Возможно, поставить некоторое содержание в ваши див, или исправить их размеры

Редактировать относительно ваших других вопросов

// HTML 
<body> 
    <div id= "background"> 
    Test content 
    </div> 
</body> 

// CCS 
html,body 
{ 
    margin:0 20px 0 20px; 
    background-color : gray; 
    height: 100%; 
} 
#background 
{ 
    width:100%; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
    background-color : blue; 
}

Вы можете увидеть результат здесь: http://jsfiddle.net/Nz5WK/1/

источник

2012-02-18 02:36:22 Valky

z-index только произведение на position: relative, fixed, или absolute.

Кроме того, если он стар для внешности, рассмотреть вопрос об использовании border:

div { width:100px; height:100px; background:lightblue; border:50px solid gray;}

источник

2012-02-18 02:37:10 bookcasey

Да, но здесь нет необходимости ... – Valky

А если бы я хотел серый с левой и с правой стороны, но не сверху и снизу? Я хочу, чтобы синий простирался до самого верха и снизу. – Zack

Мне также нужно, чтобы увеличить длину страницы. – Zack

Вы можете устранить один из отделов, применяя первоначальный серый фон для тела:

body { background: gray } 
body > div.blue { background: blue }

<body> 
<div class="blue"> 
Some text. 
</div> 
</body>

Обратите внимание, что в этом случае серая часть будет иметь ширину 8 пикселей, как определено по умолчанию по умолчанию.

Или, если вы хотите синюю часть, чтобы занять весь экран с серой «границы» вокруг него, не нужно даже разделение:

body { background: blue; border: 10px solid gray }

<body> 
Some text. 
</body>

источник

2012-02-18 02:43:27 animuson

css позиционирование/цвет

ответ

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