Question

我想创建一个响应式或重新调整大小的背景图案，它有六个彩色条带。我尝试使用多种颜色的li，但我的问题是，当重新调整窗口大小时，我无法锁定li。也就是说，条带没有填满整个窗口尺寸。我怎样才能做到这一点？

我的代码在下面以代码段的形式提供。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  display: table-cell;
  min-width: 1366px;
  position: fixed;
  bottom: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
ul > li {
  display: inline;
  float: left;
  bottom: 0;
  position: relative;
}
li > div {
  height: 900px;
  width: 214px;
  display: block;
}
.g {
  background-color: #4885ed;
}
.go {
  background-color: #db3236;
}
.goo {
  background-color: #f4c20d;
}
.goog {
  background-color: #4885ed;
}
.googl {
  background-color: #3cba54;
}
.google {
  background-color: #db3236;
}

<div class="topper">
</div>
<div class="bg">
  <ul>
    <li>
      <div class="g"></div>
    </li>
    <li>
      <div class="go"></div>
    </li>
    <li>
      <div class="goo"></div>
    </li>
    <li>
      <div class="goog"></div>
    </li>
    <li>
      <div class="googl"></div>
    </li>
    <li>
      <div class="google"></div>
    </li>
  </ul>
</div>

JSFiddle

Answer 1

使用linear-gradient作为背景而不是使用多个li元素，您只需使用一个元素即可完成此操作。正如jiff指出的那样，你不应该在div内使用li元素。

通过将元素的大小设置为等于屏幕大小，并使用颜色停止的百分比值，可以实现所需的效果。

使用以下逻辑创建渐变：

需要六个彩色条带作为背景，因此每个彩色条带只能占元素背景的六分之一。也就是说，（100％/ 6）达到16.66％左右。
第一种颜色应从0％开始，以16.66％结束（颜色停止），因此应写成如下：
```
<color> 0%, <color> 16.66%
```
（在摘录中，未写入<color> 0%，因为假设第一种颜色从0％开始）
第二种颜色应从第一个元素结束开始，并应再占16.66％。所以应该从16.66％开始到33.33％结束。这就是为什么它写成#db3236 16.66%, #db3236 33.33%。
同样，第三种颜色从第二种颜色开始，另外第二种颜色又增加了16.66％。所以它的开始是33.33％，结束是49.99％。同样，应确定每种颜色的起点和终点，然后在linear-gradient中设置。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  background: linear-gradient(to right, #4885ed 16.66%, #db3236 16.66%, #db3236 33.33%, #f4c20d 33.33%, #f4c20d 49.99%, #4885ed 49.99%, #4885ed 66.66%, #3cba54 66.66%, #3cba54 83.33%, #db3236 83.33%, #db3236 100%);
}

<div class="topper">
</div>

<div class="bg">
</div>

如何从调整大小来锁定LI标签中的DIV？

1 个答案: