Я пытаюсь добавить фоновое изображение к своей временной шкале на веб-сайте, но я не могу перемещать фоновое изображение вверх и вниз без его сжатия. Кажется, что есть какой-то невидимый барьер, мешающий мне двигать изображение вверх. Если он движется вверх, он просто сжимается.
edit: Извините за путаницу. Я хочу переместить изображение вверх на фоне временной шкалы. Я не могу переместить его вверх, используя top.
Изначально я даже не мог отобразить изображение, но теперь мне нужно использовать свойство background-image: cover, и оно работает не так, как ожидалось. Я делаю что-то не так.
Что я пробовал:
- настройка высоты и ширины моих элементов
- с помощью Top для перемещения фонового изображения вверх / вниз
Вот код временной шкалы и таблицы стилей:
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
top: 0px;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li><a href="#resume">Resume</a></li>
<li><a href="#academics">Academics</a></li>
<li><a href="#projects">Projects</a></li>
<li class="right-button"><a href="#contacts">Contact Info</a></li>
<li class="other-button"><a href="#other">Test</a></li>
<li class="other-button"><a href="#other">Testing</a></li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%;">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg) height: 100%, width: 100%"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>