suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Der lineare Farbverlauf funktioniert nicht mit Variablen in Hell-/Dunkel-Themen

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!

P粉190443691P粉190443691242 Tage vor339

Antworte allen(1)Ich werde antworten

  • P粉548512637

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

    



  
  
  
  Elliott D'Orazio
  
  
  
  
  




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

    Antwort
    0
  • StornierenAntwort