欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

漸變間隔渲染具有不同的寬度

CSS
劉姿婷1年前7瀏覽0評論

我有一段代碼可以將間隔符渲染到整個窗口，但是我只希望它和它下面的文本一樣寬。這種渲染是一種漸變。

我做錯了什么？ 我嘗試溢出，背景-重復，重復，將它們都移動到一個表格中。

.body {
  font-family: "Roboto", "Arial", "Helvetica", "sans-serif";
  max-width: 1200px;
  background-color: #26BFBF;
}

.toplogo {
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.h1 {
  background-color: #ffffff;
  background-size: cover;
  background-position: bottom;
  font-size: 20px;
  color: #262626;
  margin: 0 40px 0 60px;
  text-align: center;
}

.spacer {
  background-image: linear-gradient(#26BFBF, #ffffff);
  background-size: 100%;
  background-repeat: no-repeat;
}

<body class="body" bgcolor="#ffffff">
  <div class="toplogo" align="center">
    <a href="xxx" target="_blank">
      <img class="light-img" src="xxx" alt="" style=""> </a>
  </div>

  <div class="spacer">
    <br>>
  </div>

  <div class="h1">
    Newly published material
  </div>
</body>

為了使漸變適合h1的寬度，我們必須將其寬度設置為與h1的寬度相同。

此外，在HTML代碼中有一個打字錯誤。

看一看，告訴我這是否是你想要實現的:

.body {
  font-family: "Roboto", "Arial", "Helvetica", "sans-serif";
  max-width: 1200px;
  background-color: #26BFBF;
}

.toplogo {
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.h1 {
  background-color: #ffffff;
  background-size: cover;
  background-position: bottom;
  font-size: 20px;
  color: #262626;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.spacer {
  background-image: linear-gradient(#26BFBF, #ffffff);
  background-size: 100%;
  background-repeat: no-repeat;
  max-width: 222px;
  margin: 0 auto;
}

<body class="body" bgcolor="#ffffff">
  <div class="toplogo" align="center">
    <a href="xxx" target="_blank">
      <img class="light-img" src="xxx" alt="" style=""> </a>
  </div>

  <div class="spacer">
    <br>
  </div>

  <div class="h1">
    Newly published material
  </div>
</body>