使用css3作为网站的后台

我想用CSS3和HTML5技术，不使用图像，得到完全相同的结果

这里是HTML

<div id="overlay"></div>
<div id="lines"></div>

我在JSFIDLE上得到了一些reuslt：

但我不知道还能做什么。有人能帮我达到这个结果吗

• 涉猎：
• JSFIDLE：（尝试在更大的窗口中打开结果）

HTML

CSS

正文{
背景图像：-ms径向梯度（中心，圆最近角，#63636363 0%，#2728B 100%）；
背景图像：-莫兹径向梯度（中心，圆最近角，#636363 0%，#2728b 100%）；
背景图像：-o-径向梯度（中心，圆最近角，#636363 0%，#2728b 100%）；
背景图像：-webkit渐变（径向，中心，0，中心，447，颜色停止（0，#63636363），颜色停止（1，#27282B））；
背景图像：-webkit径向渐变（中心，圆最近角，#63636363 0%，#2728B 100%）；
背景图像：径向渐变（圆心最近的一个角，#636363 0%，#2728b 100%）；
z指数：-5；
}
#线条{
背景尺寸：20px 20px；
背景图像：-webkit重复线性渐变（0deg，#fff，#fff 1px，透明2px，透明20px），-webkit重复线性渐变（-90deg，#fff，#fff 1px，透明2px，透明20px）；
背景图像：-莫兹重复线性梯度（0deg，#fff，#fff 1px，透明2px，透明20px），-莫兹重复线性梯度（-90deg，#fff，#fff 1px，透明2px，透明20px）；
背景图像：-o-重复线性梯度（0deg，#fff，#fff 1px，透明2px，透明20px），-o-重复线性梯度（-90deg，#fff，#fff 1px，透明2px，透明20px）；
背景图像：重复线性渐变（0deg，#fff，#fff 1px，透明2px，透明20px），重复线性渐变（-90deg，#fff，#fff 1px，透明2px，透明20px）；
身高：100%；
宽度：100%；
不透明度：0.14；
位置：绝对位置；
排名：0；
左：0；
z指数：-4；
}
#线路2{
背景尺寸：100px 100px；
背景图像：-webkit重复线性渐变（0deg，#fff，#fff 2px，透明2px，透明100px），-webkit重复线性渐变（-90deg，#fff，#fff 2px，透明2px，透明100px）；
背景图像：-莫兹重复线性梯度（0deg，#fff，#fff 2px，透明2px，透明100px），-莫兹重复线性梯度（-90deg，#fff，#fff 2px，透明2px，透明100px）；
背景图像：-o-重复线性梯度（0deg，#fff，#fff 2px，透明2px，透明100px），-o-重复线性梯度（-90deg，#fff，#fff 2px，透明2px，透明100px）；
背景图像：重复线性渐变（0deg，#fff，#fff 2px，透明2px，透明100px），重复线性渐变（-90deg，#fff，#fff 2px，透明2px，透明100px）；
身高：100%；
宽度：100%；
不透明度：0.14；
位置：绝对位置；
排名：0；
左：0；
z指数：-3；
}
#覆盖层{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
z指数：-2；
}

我的试用版（仅适用于演示版的webkit规则（Chrome））：

（）

还有一个加了条纹的：

background-size:4px 4px; 
background-image: 
  repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);

---

给

#行

一个比

#覆盖

更大的z索引值，例如，将其设置为

-2

，然后将径向CSS3渐变添加到

#overlay

示例：我在Firefox上看不到径向渐变只需添加与

-moz-

前缀相同的规则xi在Firefox上看不到径向渐变firefox@megatron您使用的是哪个版本的firefox？我可以在firefox上清楚地看到渐变。@威震天我使用17.0.1，但仍然可以看到渐变。请将其交叉-browser@megatron这是JSFIDLE的一个问题。尝试复制并粘贴代码，然后在本地硬盘上运行。

background-size: 100px 100px;    

background-image:
   repeating-linear-gradient(0deg, #999, transparent 2px, transparent 20px),
   repeating-linear-gradient(0deg, #fff 1px, transparent 2px, transparent 100px),
   repeating-linear-gradient(90deg, #999, transparent 2px, transparent 20px),
   repeating-linear-gradient(90deg, #fff 1px, transparent 2px, transparent 100px);

background-size:4px 4px; 
background-image: 
  repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);