Saya sedang mengusahakan tapak web peribadi saya - https://cooperativedoilylivedistro.elliott23.repl.co - ia mempunyai tema terang dan gelap bergantung pada pilihan. Masalahnya ialah apabila saya menetapkan kecerunan linear kepada pembolehubah ia tidak berfungsi dan keseluruhan latar belakang menjadi putih. Itulah HTML, CSS dan JS. Jika anda ingin tahu apa yang berlaku, lihat tapak web dalam penyemak imbas anda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Elliott D'Orazio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta content="Elliott-D'Orazio" property="og:title" />
<meta content="my amazing portfolio website" property="og:description" />
<script src="script.js" defer></script>
</head>
<body>
<div class="split right">
<h1>Elliott D'Orazio</h1>
<h3>Front-End Developer</h3>
<div class="icons">
<i class="fa-solid fa-bars fa-2x" style="color: #000000;"></i>
<i class="fa-solid fa-address-card fa-2x" style="color: #000000;;"></i>
<i class="fa-solid fa-phone fa-2x" style="color: #000000;"></i>
</div>
</div>
<div class="mobile">
This page isn't viewable on mobile, move to a desktop to view it!
</div>
</body>
</html>
:root{
--accent-color-: #4022d3;
}
body:not(.dark) {
--background: white;
--text: black;
}
body.dark {
--background: #222;
--text: white;
}
html {
height: 100%;
width: 100%;
background-image: linear-gradient(to right, transparent 20%, var(--background) 60% ), url('bd86goc4fhvenj72.jpg');
font-family: 'Rubik', monospace;
background-size: cover;
}
/* *{
outline: 1px red solid;
} */
.split {
height: 100%;
width: 40%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
text-align: center;
background-color: var(--background);
color: var(--text);
}
.right {
right: 0;
background-color: var(--background);
}
h1{
font-size: 7.4em;
font-weight: 800;
}
.icons{
display: flex;
flex-direction: row;
gap: 20px;
margin-left: 40%;
width: 136px;
}
.fa-solid{
color: var(--text) !important;
}
.fa-solid:hover{
content: '';
color: var(--accent-color-) !important;
cursor: pointer;
}
.mobile{
display: none;
}
@media screen and (max-width: 678px) {
body{
display: none;
}
.mobile{
display: block !important;
color: #fff;
}
}
let dark_prefered = window.matchMedia("(prefers-color-scheme: dark)")
if(dark_prefered.matches) document.body.classList.add("dark")
dark_prefered.addEventListener("change", () => {
if(dark_prefered.matches) document.body.classList.add("dark")
else document.body.classList.remove("dark")
})
Saya telah mencuba membuat berbilang kecerunan tetapi tidak berjaya. Saya bertanya kepada rakan yang lebih berpengalaman dan dia juga tidak dapat memahaminya. Jadi saya datang ke sini dan bukannya pergi ke AI seperti ChatGPT. Terima kasih atas bantuan anda. Terima kasih!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kod ini boleh membantu anda menyelesaikan masalah kecerunan linear
:root{ --accent-color-: #4022d3; color-scheme: dark light; --background-white: white; --background-dark: #222; } body:not(.dark) { --text: black; /* background-color: var(--background-white); */ } body.dark { background: var( --background-dark); --text: white; } html { height: 100%; width: 100%; background-image: linear-gradient(to right, transparent 20%, var(--background-white) 60% ), url('http://www.skrenta.com/images/stackoverflow.jpg'); font-family: 'Rubik', monospace; background-size: cover; } /* *{ outline: 1px red solid; } */ .split { height: 100%; width: 80%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; text-align: center; background-color: var(--background); color: var(--text); } .right { right: 0; background-color: var(--background); } h1{ font-size: 7.4em; font-weight: 800; } .icons{ display: flex; flex-direction: row; gap: 20px; margin-left: 40%; width: 136px; } .fa-solid{ color: var(--text) !important; } .fa-solid:hover{ content: ''; color: var(--accent-color-) !important; cursor: pointer; } .mobile{ display: none; } @media screen and (max-width: 678px) { body{ display: none; } .mobile{ display: block !important; color: #fff; } }