Фоновое градиент изображения останавливает короткий пиксель ⇐ Html

[Anonymous]

Я создаю свой первый проект HTML/CSS/JavaScript для моего класса веб -разработки. Я многому научился и очень наслаждаюсь решением проблем, когда выясняют, почему вещи не работают и как это исправить. Но эта одна проблема в настоящее время заставляет меня в тупик. Градиент, кажется, останавливает пиксель коротко от нижней части изображения. Сначала я подумал, что это было пространство между секцией героев, и раздел, следующий за ним, но после более глубокого расследования я понял, что это градиент, останавливающий короткий, так как я вижу детали изображения в этой полосе. Если я удалю градиент, раздел героя и раздел под ним касаются.

Код: Выделить всё

/* Hero Section */

.hero-image {
background-image: linear-gradient(0deg,rgba(75, 74, 30, 1) 0%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.75) 100%), url(Images/Headers/Header1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}

.hero-text {
display: flex;
flex-direction: column;
align-items: center;
color: #C5C3C3;
}

.hero-text h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 60px;
margin-bottom: 0;
}

.hero-text p {
font-family: Comfortaa, sans-serif;
font-size: 25px;
}

.hero-text button {
border-radius: 15px;
border: none;
background-color: #79512E;
height: 40px;
width: 250px;
color: #C5C3C3;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
}
< /code>
Я попытался добавить дополнительный шаг в градиент без изменения: < /p>
.hero-image {
background-image: linear-gradient(0deg,rgba(75, 74, 30, 1) 0%, rgba(75, 74, 30, 1) 1% rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.75) 100%), url(Images/Headers/Header1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}

, прежде чем понять, что это был градиент, не простирающийся полностью, я также без успеха без успеха.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ixel-short