在CSS/Jquery中创建渐变网格

Question

我不确定这是否可行，但我可以使用CSS/Jquery技术创建渐变网格吗？ 类似的东西

我想随机生成这个网格，然后可能动画它，所以我试图避免使用图像。我不确定这样的事情是否可能。

我在想也许是创建几个单独的渐变层，然后将它们全部叠加到一个固定的位置并更改它们的不透明度设置？

Answer 1

目前

几年前，我使用SVG，HTML5 canvas标签以及最近的CSS3渐变，尝试了一些沿着这些线条的东西。我不相信目前有一种超越简单线性或径向梯度的自然方法。

问题是如果只能使用简单的线性和径向渐变（这是唯一可用的工具）模拟网格渐变。

不幸的是，当您使用不透明度或RGB组合多个渐变时，不同渐变色的颜色倾向于以无用的方式组合，导致颜色变淡。避免这种情况需要能够在浏览器中将其渲染为单个复合渐变。

渐变可以具有的形状也有很大的局限性 - 任意角度的线性渐变和径向对称的椭圆渐变。既不允许自由形式，也不允许形状不规则。可应用于最终图像的2D变换本质上也是相当规则的（缩放，倾斜等）。

今后

最有前途的选择，我知道在不久的将来是在SVG 2.0网格渐变（也许扩散曲线以及）可能的支持。如果这确实发生了并且最终得到浏览器的支持，那应该开始大大扩展选项。之后不久，HTML5画布标签和CSS3可能会出现。

而作为@vals在下面的评论中指出，WebGL的应该提供一些非常有前途的选项（HTML5画布标记使用3D上下文）。

相关链接

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html

Answer 2

我已经做了一个简单的布局来解释这一点。

首先，我会放4个div，第一个显示部分结果，最后看最后的结果。该标记就是：

<div class="box mesh1"></div> 
<div class="box mesh2"></div> 
<div class="box mesh3"></div> 
<div class="box mesh"></div> 

这里盒只是对尺寸，mesh1 3保持部分结果，在网，我们把它放在一起。

的CSS是：

.box { 
    width: 400px; 
    height: 150px; 
    position: relative; 
    display: inline-block; 
} 

.mesh1, .mesh { 
background: 
    -webkit-linear-gradient(5deg, rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5)) 
} 

.mesh:after, .mesh:before { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
    top: 0px; 
    right: 0px; 
} 
.mesh2, .mesh:after { 
background: -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);} 

.mesh3, .mesh:before { 
background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);} 

我给到mesh1类背景的直链，inclinated 5度，并在RGBA格式指定的颜色，以允许透明度。

然后，为了能够覆盖更多的渐变，我指定为前后的伪元素，共享相同的布局属性。

对于after元素，我给出了一个圆形渐变，与mesh2共享 对于before元素，我给出了一个椭圆渐变，偏离中心。 所有这些都可以是rgba。

最后，你看到在网格的div重叠的一切

（我到处都使用WebKit的符号，使之短）

我不会说这是非常艺术的结果，但我离开这个部分你:-)

fiddle here

Answer 3

在我的第一个答案，我解释这是怎么回事更多在 “艺术” 的方式比 “数学” 的方式。 Matt Coughlin的回答让我想到了一个更加数学的答案，至少我们会让“网格”部分的要求更为严格。

也就是说，我们有颜色的矩阵，我们希望在一个表格显示这一点。如果网格的间距为100px，那么矩阵的颜色[x] [y]会以100x和100y的形式提供给像素。它们之间的像素将以双线性方式进行近似处理。

对于这样的做法，在CSS是：

.mesh { overflow: hidden; position: absolute; width: 300px; height: 300px; } 

.tile { width: 200px; height: 200px; position: absolute; display: block; } 

.tile11, .tile21, .tile31 { 
left: -50px; 
} 
.tile12, .tile22, .tile32 { 
left: 50px; 
} 
.tile13, .tile23, .tile33 { 
left: 150px; 
} 
.tile11, .tile12, .tile13 { 
top: -50px; 
} 
.tile21, .tile22, .tile23 { 
    top: 50px; 
} 
.tile31, .tile32, .tile33 { 
top: 150px; 
} 

.tile11 { 
background: -webkit-radial-gradient(center center, 100px 100px, 
     rgba(255, 0, 0, 1) 0%, 
     rgba(255, 0, 0, 0.5) 50%, 
     rgba(255, 0, 0, 0) 100%);} 

.tile12 { 
background: -webkit-radial-gradient(center center, 100px 100px, 
     rgba(255, 0, 0, 1) 0%, 
     rgba(255, 0, 0, 0.5) 50%, 
     rgba(255, 0, 0, 0) 100%);} 

我利用一切格为网格的地方贡献者，只得到“接触”的inmediate邻居，和去一个完全透明超越这一点。

结果是这样的：

fiddle

的2种第一颜色都是红色的作为测试。在一个完美的系统中，连接2个点的线始终应该是完美的红色。

这是真的，这不是一个完美的结果，但该结果的“污浊”或“washyness”或多或少是避免