cari

Rumah  >  Soal Jawab  >  teks badan

Kecerunan linear tidak berfungsi dengan pembolehubah dalam tema terang/gelap

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!

P粉190443691P粉190443691242 hari yang lalu342

membalas semua(1)saya akan balas

  • P粉548512637

    P粉5485126372024-03-30 12:52:20

    



  
  
  
  Elliott D'Orazio
  
  
  
  
  sssccc




  
    
    
    Elliott D'Orazio
    
    
    Front-End Developer
    
    
    
      
      
      
    
    
  
    
  
    
    This page isn't viewable on mobile, move to a desktop to view it!

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

    balas
    0
  • Batalbalas