Дано:
Бэкграунд у контейнера, на котором от центра экрана по диагонали идут полосы, на конце каждой должна быть надпись.
Если задаю position: absolute;
надписям, то соответственно при изменении разрешения экрана картинка пропорционально изменяется. И получается, что надписи висят в воздухе.
Прошу помочь разобраться с этим вопросом.
-
Можете использовать позицинирование текста относительно каких-то элементов, с таким свойством позиции при изменении размеров окна , будет изменятся позиция элемента. position: relative; – DmitriyKhirniy 8 фев '16 в 19:56
добавить комментарий
|
1 ответ
Рисуете пропорциональную картинку и ваяете такой код:
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
Css соответственно такой, вместо цвета бекграунда вставите изображения:
.container {
background-image: url("http://i.stack.imgur.com/h2bLp.png");
background-position: center top;
height: 307px;
position: relative;
width: 550px;
}
div > div {
width: 60px;
height: 30px;
position:absolute;
}
div > div:nth-child(even) {
background-color: tomato;
}
div > div:nth-child(odd) {
background-color: green;
}
.a {
top: 40px;
left: 20px;
}
.b {
top: 40px;
right: 140px;
}
.c {
bottom: 35px;
left: 20px;
}
.d {
bottom: 40px;
right: 140px;
}