CSS3 实现条纹斜线方格背景纹理

CSS3 给了他们许多捷伊优点，当中鲜有许多很炫的机能，像左上方的增设，始终是他们探讨和应用领域的三个看点，CSS3 中减少了对大背景的掌控，无此是采用三个单个的左上方，在 CSS3 的掌控下，能采用数个左上方，加进更炫的效用和听觉新体验，那时就给我们说说采用 CSS3 同时实现横纹箭头格子大背景着色的方式标识符。

同时实现基本原理

主要就是应用领域了三个 CSS3 的优点，三个是 linear-gradient，即非线性蓝紫色，另外三个是 background-size，用以确认蓝紫色的体积。

background-size SIXTEEN恩贡寺是大背景的体积。假如没 background-size 的管制，蓝紫色大背景就会从上走到下（或从左走到右），100% 全面覆盖。

蓝紫色这玩意儿就跟 Photoshop 中的蓝紫色那样，特别 Webkit Mach应用领域程序下这个许多难在的 color-stop 是下面这货了：

FireFox/Opera应用领域程序下的颜色过渡阶段点间接是比率或者画素值，近似于下面的color-stop了。

返回责任编辑示例，为的是管制大部份蓝紫色花纹的大小不一，他们标准化将蓝紫色体积管制为 50 画素，只好就有了 Demo 网页中的该些 CSS 标识符了：

-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px; /* 掌控横纹的大小不一 */

假如没 background-size 的管制，那么上图中的三个重复横纹就会变成下面许秀琴般纯洁的模样：

下面说说蓝紫色的事件，那下面最简单的许多土黄的垂直横纹来说吧。其蓝紫色相关的 CSS 标识符如下：

background-color: #f90;background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

这里的横纹同时实现的方式是很聪明的，假如按照他们photoshop中制作蓝紫色的习惯，可能相关的CSS标识符应该是下面这样子：

background-image: linear-gradient(0deg, #ffad33 0， #ffad33 50%, #f90 50%, #f90 100%);

而这里的同时实现是间接关心 50% 中点处，增设三个透明度为 20% 的白色断点，然后间接映在大背景上。不可不谓轻巧简便，重用性高。

最后讲下最复杂的例子，是这个黑白斜纹了，其相应的蓝紫色标识符如下：

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%);background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%);background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);

不要看下面的标识符好像建楼房那样，架得老高老高。其实是东南，东北，西南，西北四个方向同时画个黑色的边角（等腰直角三角形），中间透明镂空。因为 Demo 网页大背景色是白色，所以就会使黑白间隔效用，假如采用小 Bug 将 Demo 网页的大背景色换一换，则就像是卸了妆的非主流模样大变，例如大背景换成和谐的绿色：