Проблема с перекрытием контента фоновым изображением ⇐ CSS

[Anonymous]

Как разместить изображение вверху страницы, которое исчезает при прокрутке, а содержимое страницы (основной текст) перекрывает изображение по мере его исчезновения.
Я новичок и использую код Visual Studio. Во-первых, у меня не так много знаний в области кодирования, поскольку я только начал в этом году учиться, во-вторых, этот проект представляет собой копию школьного домашнего задания — задание состоит в том, чтобы взять наш любимый сайт и скопировать его, не используя проверьте элемент на предмет копирования и вставки.
Это сайт, который я хочу скопировать: https://www.townandcountrymag.com/leisu ... ntage-cars /
Всем спасибо! Надеюсь, это подходящее место, чтобы задать этот вопрос.

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

document.addEventListener('DOMContentLoaded', function() {
var background = document.querySelector('.background-image');

// Listen for scroll event
window.addEventListener('scroll', function() {
// Calculate opacity based on scroll position
var opacity = 0.5 - (window.scrollY / window.innerHeight);

// Set opacity to the background image
background.style.opacity = opacity > 0 ? opacity : 0;
});
});
/*SCRIPT.JS*/

/* Reset and general styles */
body {
font-family: 'Kumbh Sans', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
box-sizing: border-box;
overflow-x: hidden; /* Prevent horizontal scrollbar */
}

* {
box-sizing: inherit;
margin: 0;
padding: 0;
}

/* Background image */
.background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('1954-mercedes-300sl-gullwing-a_1.jpg'); /* Replace 'your-background-image.jpg' with your image path */
background-size: cover;
background-position: center;
opacity: 0.5; /* Set initial opacity */
z-index: -1; /* Behind other content */
transition: opacity 0.5s ease; /* Add transition effect */
}

/* Navigation design */
.title {
background: rgb(31, 31, 31);
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
margin-left: -10px; /* Adjust margin */
}

.title_text {
background-color: rgb(137, 218, 15);
background-size: 100%;

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

-webkit-background-clip: text;
-moz-background-clip: text;

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

   -webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
cursor: default;
text-decoration: none;
text-align: center;
font-size: 2rem;
}

/* Main content section */
.content {
padding: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin-left: -500px; /* Adjust margin */
}

section {
width: 100%;
max-width: 1000px; /* Adjust the max-width as needed */
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
align-items: center; /* Center items vertically */
}

section h2 {
flex: 1 1 100%;
font-size: 1.8rem; /* Increase font size */
margin-bottom: 10px;
text-align: center;
}

section img {
width: 100%;
max-width: 900px; /* Adjust the max-width as needed */
margin: 0 auto; /* Center the image horizontally */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

section p {
flex: 1 1 100%;
font-size: 1.2rem; /* Increase font size */
color: #666;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}

/* Footer */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/*STYLE.CSS*/






Proiect - Claudio Negrea




[i]SITE - PROIECTUL LA PCLP[/i]


Jaguar E-Type
[img]1968-jaguar-e-type_1.jpg[/img]
The 1960s Jaguar E-Type, famously praised by Enzo Ferrari as "the most beautiful car ever made," remains a classic sports car icon. With its impressive performance—reaching speeds of up to 150 mph—and superior braking capabilities for its time, it continues to capture the hearts of enthusiasts. Experience the thrill firsthand at the Jaguar Heritage Driving Experience program in Kenilworth, U.K., where you can spend a day driving these timeless classics.



Contact Us
Email: [email protected]
Phone: 0719346413
© 2024 Your Company. All rights reserved.






/*INDEX.HTML*/

Я искал решение в Интернете, но то, что нашел, меня не удовлетворило. Тогда я подумал спросить здесь, может быть, кто-нибудь сможет мне помочь и помочь мне лучше понять.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ound-image