建设有瓷砖

我想acheive在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这样做，如果任何人有一招，做到这一点。

来源

2016-07-15 RDardelet

为什么不创建为图像的背景？背景尺寸：盖; –

会更容易些，我知道，但我必须让我的网页很轻，也反应灵敏，图像背景将是我的最后一招。（我也要求我的客户能够编辑的颜色：d） – RDardelet

但是，没有压力。 –

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

来源

2016-07-15 08:15:59

一下OK思维，看起来像一个表格会做的伎俩，更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：n-child（1）td：n-child（1） { {background}：dark red; }

.red TR：第n个孩子（1）TD：第n个孩子（2） { 背景：少暗红色; }

等

如果你使用的青菜可以预定义你颜色这将是巨大的常量。

来源

2016-07-15 07:58:06

您可以使用渐变做你的设计成一排（或柱）。然后，重复刚才的梯度在其他行，它抵消了一步：

.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>

来源

2016-07-15 08:27:42 vals

回答

相关问题