用瓷砖构建背景渐变

Question

我试图在 html/css 中实现以下背景：

我已经搜索了制作渐变的方法，但我只找到了平滑的渐变，找不到 基于图块的 渐变。我决定尝试用 flexboxes 做这个渐变（见下面的片段：

div.s-t-numbers-background {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
div.s-t-numbers-background-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
div.s-t-numbers-background-tile {
  background-color: #FFFAAA;
  width: 100%;
  height: 100%;
}

<div class="s-t-numbers-background">
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
</div>

左上角的颜色是：#8e003f，右下角的颜色是：#f02435 我很乐意避免使用 div 执行此操作并使用 CSS 如果有人有技巧可以做到这一点。

Answer 1

好的，考虑一下，看起来 table 就可以解决问题，更不用说 html 和 css 代码了。然后为每个 table 单元格

设置背景颜色样式

<table id="red">
  <tbody>
   <tr>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
   </tr>
   <tr>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
   </tr>
   <tr>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
   </tr>
   <tr>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
     <td>number</td>
   </tr>
</tbody>
</table>

.红 { 边界折叠：折叠； }

.red tr:nth-child(1) td:nth-child(1) { background:dark红色； }

.red tr:nth-child(1) td:nth-child(2) { background:less深红色； }

等等

如果您使用 sass，您可以将颜色预定义为常量，这会很棒。

Answer 2

自行自定义颜色和位置。恐怕这对 acros 浏览器没有很大的支持。提到的背景图片会好得多（你可以有 6x4px png，这样的文件大小不大）

div{
  width:160px;
  height: 240px;
  border:1px solid;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6'><rect fill='#8e003f' x='0' y='0' width='1' height='1'/><rect fill='#8e003e' x='0' y='1' width='1' height='1'/><rect fill='#8e003d' x='0' y='2' width='1' height='1'/><rect fill='#8e003c' x='0' y='3' width='1' height='1'/><rect fill='#8e003b' x='0' y='4' width='1' height='1'/><rect fill='#8e003a' x='0' y='5' width='1' height='1'/><rect fill='#8e003f' x='1' y='0' width='1' height='1'/><rect fill='#9e003d' x='1' y='1' width='1' height='1'/><rect fill='#Ae003b' x='1' y='2' width='1' height='1'/><rect fill='#Ce0038' x='1' y='3' width='1' height='1'/><rect fill='#f02437' x='1' y='4' width='1' height='1'/><rect fill='#f02435' x='1' y='5' width='1' height='1'/><rect fill='#8e003f' x='2' y='0' width='1' height='1'/><rect fill='#Ae003d' x='2' y='1' width='1' height='1'/><rect fill='#C0243b' x='2' y='2' width='1' height='1'/><rect fill='#D02439' x='2' y='3' width='1' height='1'/><rect fill='#E02437' x='2' y='4' width='1' height='1'/><rect fill='#f02435' x='2' y='5' width='1' height='1'/><rect fill='#a0243a' x='3' y='0' width='1' height='1'/><rect fill='#b02439' x='3' y='1' width='1' height='1'/><rect fill='#c02438' x='3' y='2' width='1' height='1'/><rect fill='#d02437' x='3' y='3' width='1' height='1'/><rect fill='#e02436' x='3' y='4' width='1' height='1'/><rect fill='#f02435' x='3' y='5' width='1' height='1'/></svg>");
  background-size: 100%;
}

<div></div>

Answer 3

您可以使用渐变在一行（或一列）中进行设计。然后，只需在其他行中重复渐变，将其偏移一步：

.test {
  width: 400px;
  height: 300px;
  background-image: 
    linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),       linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),       linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),       linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%);
  background-size: 200% 25%;
  background-position: 0% 0%, 25% 25%, 50% 50%, 75% 75%;
  background-repeat: no-repeat;
  }

<div class="test"></div>

用瓷砖构建背景渐变

Building a background gradient with tiles

html

css

gradient

background