【css3】斜纹背景

如图所示，斜纹纹理具有简洁且美观的特性，被广泛应用于背景上。然而目前很多组件都有自适应的需求，所以以引用图片文件作为背景图的方式就不适用了，当容器的高度变高时，由于斜纹不能被纵向repeat，

会出现两种不满足条件的情况：

    1、如果保持图片的缘由比例就会出现背景图纵向铺不满的情况；

    2、如果让背景图填充满整个容器，就会出现背景图片被拉伸变形的情况；
由此可见这就需要使用css来定义样式了。

本文中将使用到的css属性：

1. background-color

2. background-image

3. background-size

1、background-color

这个没什么好说的，就是设置背景颜色，这不是本文重点就不着重说明了。请参考 http://www.w3school.com.cn/cssref/pr_background-color.asp

2、background-image

我们常用这个属性的url()方法来设置背景图片，然而本文的重点并不在于背景图片，所以直接看linear-gradient()这个方法

首先我们先了解一下css3渐变，渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。如下图所示：

CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法，但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。

linear-gradient() 语法说明：

这个函数（特性）接受的第一个参数是渐变的角度，他可以接受一个表示角度的值（可用的单位deg、rad、grad或turn）或者是表示方向的关键词（top、right、bottom、left、left top、top right、bottom right或者left bottom）。第二个参数是接受一系列颜色节点（终止点的颜色）。很明显，使用linear-gradient是通过渐变的角度来控制渐变的方向。

示例一：创建一个简单的斜纹

显然这与我们的需求不相符，需要更多的颜色过渡点：

实现方法

示例：https://codepen.io/zxm/pen/BOpwyy

代码：

简化版：

3、background-size

请参考 http://www.w3school.com.cn/cssref/pr_background-size.asp