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

[Anonymous]

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

const headerEl = document.querySelector('.header');

window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
headerEl.classList.add('header-scrolled')
} else if (window.scrollY 
/* Body */

body {
margin: 0;
padding: 0;
}

/* Header & Nav Bar */

.header {
position: fixed;
width: 100%;
transition: all 0.2s;
}

.header-scrolled {
background-color: #4B4A1E;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 25px;
padding-right: 35px;
}

nav img {
width: 50px;
padding: 8px;
}

nav ul {
list-style: none;
}

nav ul li {
display: inline-block;
}

nav ul li a {
color: #C5C3C3;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 10px;
}

nav ul li a:hover {
background-color: #79512E;
border-radius: 8px;
}

.activenav {
text-decoration: underline;
text-decoration-color: #79512E;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
}

.activenav:hover {
text-decoration-color: #4B4A1E;
}

/* 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;
}

/* Shopping Perks Section */

.shoppingperk {
background-color: #4B4A1E;
}

.perkrow {
background-color: #4B4A1E;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 100px;
height: 120px;

}

.perk {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
width: 300px;
background-color: #C5C3C3;
border-radius: 15px;
}< /code>


[url=index.html][i][/url]
[list]
[*][url=index.html]Home[/url]
[*][url=gallery.html]Shop[/url]
[*][url=about.html]About Us[/url]
[*][url=community.html]Community[/url]
[/list]





Bloom Vallery Nursery
Rooted in Nature. Grown with Care.
Shop Now






[/i]Eco-Conscious from Root to Leaf.

[i][/i]Expert Grown.  Garden-Ready.

Я создаю свой первый проект 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