CSS 线性渐变分成水平行

Question

当尝试设置渐变背景时，渐变不是显示干净的线性渐变，而是分成几行。我尝试过更改渐变生成器，所以问题不是生成器，我尝试删除所有其他 css 行，解决问题的唯一方法是删除整个 html 内容。 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flick.dev</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <h1 class="name">Flick.dev</h1>
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li><a>Projects</a></li>
            </ul>
            <button class="btn-contact">Contact</button>
        </nav>

    </header>

    <main>
        
    </main>

    <footer>

    </footer>
    
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body {
    background: rgb(45,20,44);
    background: -moz-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d142c",endColorstr="#ee4540",GradientType=1);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Sans;
    /* background-color: white; */
}

Answer 1

那是因为你的

body

不是屏幕高度的 100%。将

height: 100vh

放在身体上。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background: rgb(45, 20, 44);
  background: -moz-linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  background: linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d142c", endColorstr="#ee4540", GradientType=1);
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Sans;
  /* background-color: white; */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flick.dev</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav class="navbar">
      <h1 class="name">Flick.dev</h1>
      <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
        <li><a>Projects</a></li>
      </ul>
      <button class="btn-contact">Contact</button>
    </nav>

  </header>

  <main>

  </main>

  <footer>

  </footer>

</body>

</html>

CSS 线性渐变分成水平行

问题描述投票：0回答：1

1个回答

最新问题

CSS 线性渐变分成水平行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1