1

我正在尝试做一个 50/50 的垂直背景。我正在尝试使用背景渐变来完成此操作，但它将背景分成三部分而不是两半。

如果我将度数更改为 90，它会将屏幕水平分成两半，但当更改为 180 时，它要么只分割屏幕的上半部分，要么将屏幕分成三份。有人可以解释发生了什么以及如何解决它吗？

在此处输入图像描述

  body {
  background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
}

h2 {
  text-align: center;
  font: 100% Stencil;
  color: red;
  font-size: 4em;
}

caption {
  text-align: center;
  font: 100% Ink Free;
  color: pink;
  font-size: 3.5em;
  font-weight: bold;
  margin-bottom: .5em;
}

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  text-align: center;
}

th {
  font: 100% Old English Text MT;
  font-weight: bold;
  font-size: 3em;
}

td {
  font: 100% Lucida Calligraphy;
  font-size: 2em;
  border-spacing: 0;
  border: 1px solid black;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

tr td:nth-child(1),
tr td:nth-child(3) {
  background: #33adff;
}

tr td:nth-child(2) {
  background: #c0e0f2;
<h2>A Table of Animals, Plants, and Cars</h2>
<table>
  <caption>Here is My Second Table in HTML</caption>
  <thead>
    <tr>
      <th scope="col">&#128049;Animals&#128054;</th>
      <th scope="col">&#127794;Plants&#127795;</th>
      <th scope="col">&#128664;Cars&#128663;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cat</td>
      <td>Pine</td>
      <td>Chevrolet</td>
    </tr>
    <tr>
      <td>Dog</td>
      <td>Oak</td>
      <td>Ford</td>
    </tr>
    <tr>
      <td>Rabbit</td>
      <td>Cedar</td>
      <td>Dodge</td>
    </tr>
    <tr>
      <td>Wolf</td>
      <td>Spruce</td>
      <td>Toyota</td>
    </tr>
  </tbody>
</table>

4

3 回答 3

0

添加

  background-repeat: no-repeat;
  background-attachment: fixed;
   height: 100%

到你的background.

使用 CSS background-attachement，您告诉 css 修复正文背景。

另外一个好的做法是添加height:100%，以使屏幕的主体全高。

  body {
  background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
  height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h2 {
  text-align: center;
  font: 100% Stencil;
  color: red;
  font-size: 4em;
}

caption {
  text-align: center;
  font: 100% Ink Free;
  color: pink;
  font-size: 3.5em;
  font-weight: bold;
  margin-bottom: .5em;
}

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  text-align: center;
}

th {
  font: 100% Old English Text MT;
  font-weight: bold;
  font-size: 3em;
}

td {
  font: 100% Lucida Calligraphy;
  font-size: 2em;
  border-spacing: 0;
  border: 1px solid black;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

tr td:nth-child(1),
tr td:nth-child(3) {
  background: #33adff;
}

tr td:nth-child(2) {
  background: #c0e0f2;
<h2>A Table of Animals, Plants, and Cars</h2>
<table>
  <caption>Here is My Second Table in HTML</caption>
  <thead>
    <tr>
      <th scope="col">&#128049;Animals&#128054;</th>
      <th scope="col">&#127794;Plants&#127795;</th>
      <th scope="col">&#128664;Cars&#128663;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cat</td>
      <td>Pine</td>
      <td>Chevrolet</td>
    </tr>
    <tr>
      <td>Dog</td>
      <td>Oak</td>
      <td>Ford</td>
    </tr>
    <tr>
      <td>Rabbit</td>
      <td>Cedar</td>
      <td>Dodge</td>
    </tr>
    <tr>
      <td>Wolf</td>
      <td>Spruce</td>
      <td>Toyota</td>
    </tr>
  </tbody>
</table>

编辑： make background:linear-garidentnot fixed，但根据内容，background-attachement:scroll改用

body {
  background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
  height: 100%;
  background-attachment: scroll;
  background-repeat: no-repeat;
}

h2 {
  text-align: center;
  font: 100% Stencil;
  color: red;
  font-size: 4em;
}

caption {
  text-align: center;
  font: 100% Ink Free;
  color: pink;
  font-size: 3.5em;
  font-weight: bold;
  margin-bottom: .5em;
}

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  text-align: center;
}

th {
  font: 100% Old English Text MT;
  font-weight: bold;
  font-size: 3em;
}

td {
  font: 100% Lucida Calligraphy;
  font-size: 2em;
  border-spacing: 0;
  border: 1px solid black;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

tr td:nth-child(1),
tr td:nth-child(3) {
  background: #33adff;
}

tr td:nth-child(2) {
  background: #c0e0f2;
<h2>A Table of Animals, Plants, and Cars</h2>
<table>
  <caption>Here is My Second Table in HTML</caption>
  <thead>
    <tr>
      <th scope="col">&#128049;Animals&#128054;</th>
      <th scope="col">&#127794;Plants&#127795;</th>
      <th scope="col">&#128664;Cars&#128663;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cat</td>
      <td>Pine</td>
      <td>Chevrolet</td>
    </tr>
    <tr>
      <td>Dog</td>
      <td>Oak</td>
      <td>Ford</td>
    </tr>
    <tr>
      <td>Rabbit</td>
      <td>Cedar</td>
      <td>Dodge</td>
    </tr>
    <tr>
      <td>Wolf</td>
      <td>Spruce</td>
      <td>Toyota</td>
    </tr>
  </tbody>
</table>

另外，请注意浏览器功能，Safari 似乎不支持它，正如@A Haworth 建议的那样。

于 2022-03-02T15:34:14.347 回答
0

只需添加no-repeat到您的background财产

background: linear-gradient(180deg, rgba(1,91,187,1) 50%, rgba(254,213,0,1) 50%) no-repeat;
于 2022-03-02T15:23:07.770 回答
0

也许您想要实现的预期效果可以通过另一种方法来完成，使用:before和:after伪选择器。像这样的东西：

.split-bg {
    display: block;
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.split-bg::before,
.split-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
}

.split-bg::before {
    background-color: rgba(1,91,187,1);
}

.split-bg::after {
    background-color: rgba(254,213,0,1);
    transform: translateY(100%);
}
于 2022-03-02T15:30:28.043 回答