用瓷砖建立背景渐变

时间：2016-07-15 07:34:16

标签： html css3 background gradient

我正在尝试在html / css中实现以下背景： enter image description here

我搜索了渐变的方法，但我只找到了平滑的渐变，找不到基于图块的渐变。我决定尝试使用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。

3 个答案:

答案 0 :(得分：1)

自行定制您的颜色和位置。我担心这个没有大的支持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>

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
  }
＆＃13; 
<div class="test"></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

好吧，考虑一下，看起来像一个表可以做到这一点，更不用说html和css代码了。然后为每个表格单元格设置背景颜色

<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 {   边界崩溃：崩溃; }

.red tr：nth-​​child（1）td：nth-​​child（1） {   背景：深红色; }

.red tr：nth-​​child（1）td：nth-​​child（2） {   背景：暗红色; }

等等

如果你正在使用sass，你可以预先定义颜色为常数，这将是很好的。

相关问题
最新问题