Ich arbeite an meiner persönlichen Website – https://cooperativedoilylivedistro.elliott23.repl.co – sie hat je nach Vorliebe helle und dunkle Themen. Das Problem ist, wenn ich den linearen Farbverlauf auf eine Variable setze, funktioniert es nicht und der gesamte Hintergrund wird weiß. Das sind HTML, CSS und JS. Wenn Sie wissen möchten, was los ist, schauen Sie sich die Website in Ihrem Browser an.
<!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")
})
Ich habe erfolglos versucht, mehrere Farbverläufe zu erstellen. Ich habe einen erfahreneren Freund gefragt und er konnte es auch nicht herausfinden. Also bin ich hierher gekommen, anstatt zu einer KI wie ChatGPT zu gehen. Ich danke Ihnen für Ihre Hilfe. Danke!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
此代码可以帮助您解决线性渐变问题
: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; } }