HTML/CSS - Изменение цвета заполненной области

У меня есть контент div с белым фоном и нижний колонтитул с серым фоном под ним. Цвет фона тела светлее серый.HTML/CSS - Изменение цвета заполненной области

<body> 
    <div class="content"> 
     <p>Content Div</p> 
    </div> 
    <footer class="site-footer"> 
      <nav> 
       <ul> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li> 
       </ul> 
      </nav> 
    </footer> 
</body>

Нижний колонтитул имеет верхнюю границу 2px. Моя проблема в том, что я хочу изменить цвет фона ниже границы. В принципе, я хочу около 25px области прямо под границей, чтобы соответствовать цвету фона тела.

Вот JSFiddle

Итак, я хочу пойти белый, светло-серый, граница, светло-серый, темно-серый.

Вместо этого он в настоящее время идет белый, светло-серый, бордюрный, темно-серый.

Возможно ли это?

Любая помощь действительно оценена.

источник

2015-04-03 Thomas Spade

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

Вы можете использовать фоновое изображение в fotter, 1px width, 25px height, в желаемом цвете, повторяется горизонтально, размещается сверху. – arkascha

Считаете ли вы использование горизонтального правила с маржером и настройку его на метку и цвет, который вы хотите? –

Вы не можете определить цвет обивка, но вы можете добиться этого с помощью :after:

.site-footer { 
    /** Don't forget to add this property **/ 
    position: relative; 
} 

.site-footer:after { 
    background-color: #F00; 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    z-index: 1; 
    height: 25px; 
}

Вот JSFiddle

я использовал красный цвет, так что вы можете четко видеть, где он находится ,

MDN docs for :after

источник

2015-04-03 06:38:23

Спасибо, что это работает, но когда я помещаю его в прямом эфире на свой сайт, а не размещаюсь прямо под его нижним колонтитулом, он просто расположен на самой верхней части страницы. Любая идея, почему это так? Если не все нормально, было бы сложно опубликовать весь код сайта. Ты меня на правильном пути. –

Ну, вам нужно добавить 'position: relative' в' .site-footer'. Это написано в ответе. –

Отлично, спасибо! –

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

В качестве альтернативы, у меня была аналогичная идея для Каталина, но я использовал псевдограницу с :before.

.site-footer { 
    position: relative; 
    border-top: 25px solid #EBEEEE; 
    background-color: #818181; 
    color: white; 
    padding: 30px 30px; 
} 

.site-footer:before { 
    content: " "; 
    position: absolute; 
    z-index: 5; 
    top: -25px; 
    left: 0; 
    right:0; 
    border-top: 2px dotted #999; 
}

Вот jsfiddle

источник

2015-04-03 07:01:10

HTML/CSS - Изменение цвета заполненной области

ответ

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