Как в фон добавить поперечную линию с заданной позицией и цветом?

Рейтинг: 1Ответов: 2Опубликовано: 17.03.2011

Возник интересный вопрос: есть контейнер высотой 80 пикселей, залитый сплошным цветом. В этом контейнере есть рисунок высотой 70 пикселей и выровненный поверху, то есть остается еще внизу 10 пикселей.

Задача: добавить полосу шириной 1 пиксель другого цвета (#fff) на позиции 75 пикселя, чтобы получилась черта подчеркивания.

Можно реализовать это вставкой изображения размером в пиксель и "репитом" по оси, но хотелось бы сделать это средствами CSS на более "низком" уровне.

#container {
  position: relative;
  height: 80px;
  background: #000 ;
}
<html>  
  <body>  
    <div id="container">  
    </div>
  </body>
</html>

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Я решил его вот так: имею ширину 80, нужна линия толщиной 1 (внизу), с отступом от верха 76 и с отступом снизу (80 - 76 = 4) 4 пикселя, то есть остается - 4 пикселя, после белой полосы. Проверяем, 75 (черная) + 1 (белая) + 4 (опять черная)... догадались? Именно!

Я разделил свою полосу на три части, одну - 75, вторую - 1, третью - 4, теперь дело техники: 

<style>
body {
    background-color: #fff;
}

#container {
    position: relative;
    height: 75px;
    background: #000 ;
}
#container1 {
    position: relative;
    height: 1px;
    background: #fff ;
}
#container2 {
    position: relative;
    height: 4px;
    background: #000 ;
}
#container img {
    border-bottom: 1px ;
    padding-bottom: 5px;
    height: 70px;
    width: 70px;
}
</style>

<body>  
    <div id="container">
        <img src="x_c98331bf.jpg">
    </div>
    <div id="container1"></div>
    <div id="container2"></div>
</body>

Осталось добавить рисунок.

▲ 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <style>
    body {
        background-color: #999;
    }

    #container {
        position: relative;
        height: 80px;
        background: #000 ;
    }

    #container img {
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
        height: 70px;
        width: 70px;
    }
    </style> 
    <body>  
    <div id="container">  
    <img src="x_c98331bf.jpg">
    </div>
    </body>
</html>