梦幻般的背景——绘制图形

当然，现在不要切图，直接用css做成。box{width:500px;高度：500px；背景：线性渐变（45deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb），线性渐变（135deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb)50px0，线性渐变（45deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb）50px50px，线性渐变（135deg，#cbcbcb25%,透明25%,透明75%,#cbcbcb75%,#cbcbcb)100px50px;背景尺寸：100px100px；background-color:#fff;}我们可以看到，我们将得到与剪切图像完全相同的效果。接下来，我们看看上面的css为什么要这样写，首先我们了解一下背景：linear-gradient()。背景中，CSS3渐变（gradients）可以看做是一张背景图，可以理解为background:url()，背景图可以是多个，对应的我们可以写多个linear-gradients，通过颜色控件拼接成一个独立的图片块。background-size刷新可以用逗号隔开，相应的linear-gradient会循环设置。这里需要注意的是linear-gradient是前后绘制的，也就是说前面的颜色会覆盖后面的颜色。分析上面的网格背景，我可以看到有两个1x1的灰色网格覆盖在一个4x4网格的顶部。每个灰色网格都可以通过基本图案拼装起来，所以我们有以下背景：linear-gradient(45deg,#cbcbcb25%,transparent25%,transparent75%,#cbcbcb75%,#cbcbcb),linear-gradient(45deg,#cbcbcb25%,透明25%,透明75%,#cbcbcb75%,#cbcbcb)50px50px;这里有个问题，小三角形之间的拼接有缝隙，所以要用图形重新拼接。背景：线性渐变（45deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb），线性渐变（45deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb)50px50px，线性渐变（135deg，#cbcbcb25%，透明25%，透明75%，#cbcbcb75%，#cbcbcb）50px0，线性渐变（135deg，#c5%bcb2、透明25%、透明75%、#cbcbcb75%、#cbcbcb)100px50px；最后我们可以得到和上面一样的方格背景。更多例子有时候我们需要的背景可能不需要重复，图形是不规则的。例如：这时候我们需要对图形的各个角分别进行设置。.box{宽度：500px;高度：500px；背景：线性渐变（黑色，黑色）左上，线性渐变（黑色，黑色）左上，线性渐变（黑色，黑色）右上，线性渐变（黑色，黑色）右上，线性渐变（黑色，黑色）右下，线性渐变（黑色，黑色）右下，线性渐变（黑色，黑色）左下，线性渐变（黑色，黑色）左下；背景重复：不重复；背景尺寸：4px20px，20px4px；其原理其实就是通过linear-gradientdrawing来设置每一个图形的位置和大小，最终得到想要的图像。以后遇到一些特殊的背景图片，可以通过css来实现。