Два сплошных цветных фона на фиксированном положении

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

Мой Компоновка: http://i.stack.imgur.com/b4qO7.jpg

То, что я точно не могу достичь:

Не имея серого цвета старт в середине первого ящика, независимо от того, что разрешение и я m не удалось сделать это с помощью инструмента «Градиент».
Устранить эффект тени, когда я применяю его с помощью CSS.

Вот чего я достиг до сих пор:

background: -webkit-linear-gradient(top, white 0, White 370px, white 301px, #818285 301px, #818285 300px, #818285 100%) no-repeat;

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

источник

2015-04-04 e7na online

Добавляя проценты после установки цвета в вашем linear-gradient собственности, вы можете достичь это влияет:

html, body{ margin:0; padding:0; height:100%; width:100%; background:#000; } 
 

 
#container{ 
 
    width:95%; 
 
    height:90%; 
 
    margin:auto; 
 
    background:-webkit-linear-gradient(#fff 0%, #fff 40%, #999 40%, #999 100%); 
 
    background:linear-gradient(#fff 0%, #fff 40%, #999 40%, #999 100%); 
 

 
    /*Vertical Align*/ 
 
    position:relative; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
} 
 

 
#content{ 
 
    width:80%; 
 
    height:80%; 
 
    background-color:#eee; 
 
    margin:auto; 
 
    
 
    /*Vertical Align*/ 
 
    position:relative; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
} 
 

 
p{ 
 
    margin:0; padding:0; text-align:center; 
 
    
 
    /*Vertical Align*/ 
 
    position:relative; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
}

<html> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="content"><p>Div Content Here<p></div> 
 
    </div> 
 
    </body> 
 
</html>

Чем больше остановок или цветовых переходов вы добавляете, тем четче это эффект должен быть.

источник

2015-04-04 17:01:08

Спасибо Lynel за ваш ответ, однако это 50% -ый 50-процентный фон. В моем дизайне два цвета не равны, и мне нужна точка, где серый начинает фиксироваться независимо от разрешения экрана или высоты моей страницы. –

Я только что отредактировал свой ответ, чтобы компенсировать два цвета на 40% и 60%. Заметьте, что я использовал 4 остановки и каждый процент соответственно. Вы можете компенсировать свои цвета в любой степени с помощью этой техники. Кроме того, что вы имеете в виду, что необходимо отрезать серое пространство? –

Я имею в виду, что если высота страницы по умолчанию равна x, а содержимое заполняет ее, она становится равной 2x, то с помощью этой техники будет изменена серая часть, начинающаяся ниже середины первого поля в моей области содержимого. а также высота страницы равна 0,5x, тогда серая часть фона может начинаться прямо под меню. который будет компрометировать внешний вид макета. –

Я использовал работу вокруг. Я не уверен, что это чистое исправление, но это неуверенно, что я хочу.

HTML

<body> 
    <div class="bg_2"></div> 
</body>

CSS

body { 
background-color: grey; 
} 

.bg_2 { 
    background-color: white; 
    width: 100%; 
    height: 380px; 
    position: absolute; 
    top: 0; 
    z-index: -1; 
}

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

Бонус: если вам нужно создать фон для перемещения, будет прокручиваться, чтобы поддерживать два цветных фона независимо от высоты страницы, вы можете изменить положение от абсолютного до фиксированного.

источник

2015-04-04 18:18:19

Два сплошных цветных фона на фиксированном положении

ответ

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