我正在開發我的個人網站 - https://cooperativedoilylivedistro.elliott23.repl.co - 它根據喜好有淺色和深色主題。問題是，當我將線性漸變設為變數時，它不起作用並且整個背景變成白色。 這就是 HTML、CSS 和 JS。如果您想了解發生了什麼，請在瀏覽器中查看網站。
<!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")
})
我嘗試過製作多個漸變，但沒有成功。我問了一位比較有經驗的朋友，他也搞不懂。所以我來到這裡，而不是去像 ChatGPT 這樣的人工智慧。非常感謝您的幫忙。謝謝！
P粉5485126372024-03-30 12:52:20
Elliott D'Orazio ssscccElliott D'Orazio
Front-End Developer
This page isn't viewable on mobile, move to a desktop to view it!
此程式碼可以幫助您解決線性漸變問題
: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;
}
}