Как уже упоминалось в названии, я хочу сделать вертикальную линию в центре под изображением, но на фоне (как в этом примере: http://www.akita.co.uk/computing-history/#decade2000). Как мне это сделать? Благодарю.Вертикальная линия под изображением, но на фоне
Вы можете achief это с псевдо-элемента. Я сделаю быстрое перо, чтобы показать вам, как, но в основном, вы просто даете изображению z-index из 2, родитель псевдоэлементов - z-index из 1, и вам хорошо идти.
Имейте в виду, что Z-индекс унаследован от родителя. Таким образом, при использовании -1 на псевдо-элемента вы говорите, возьмите родительский Z-индекс (2), и вычесть 1 из этого, так что вы в конечном итоге с г-индекса 1.
.image{
position:relative;
z-index:2;
width:200px;
height:200px;
margin:0 auto;
padding-top:100px;
&::before{
content:'';
position:absolute;
width:1px;
height:300px;
top:0;
left:50%;
background:red;
z-index:-1;
}
}
Пример в ручке: http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0
Не можете ли вы это сделать, используя CSS для установки Z-индекса вашего изображения? Установка высокого z-индекса приведет его к передней части всех других элементов вашей страницы.
Если вы потратите время на проверку кода, вы увидите, что они делают строку с помощью psuedo-элемента ':: after' CSS. – skyline3000
Спасибо skyline3000. Да, я проверил код, но я начинаю, и я не знал, как его использовать. Я также попытался написать его, но я не смог получить ожидаемый результат. –