以上这些并不是背景图，而是由CSS样式代码实现。在现代标准浏览器中，我们通过CSS3的两个属性，一个是linear-gradient，即线性渐变，另一个是background-size，用来确定渐变的尺寸，就能显示出不同方向的条纹效果。今天我们就来详解CSS制作Web页面条纹背景样式的技巧，需要的朋友可以参考下。
1、横向条纹background: linear-gradient(#fb3 20%, #58a 80%)
上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条。接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：background: linear-gradient(#fb3 30%, #58a 0);
background-size:100% 30px;
这样就形成了一个黄色占30%蓝色占70%的条纹状背景，也可以设置多种颜色，下面设置了三种颜色的条纹：background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);
background-size: 100% 45px;
2、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定background: linear-gradient(to rightright, #fb3 50%, #58a 0);
background-size:30px 100%;
3、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹：
background: linear-gradient(45deg, #fb3 50%, #58a 0);(让背景的渐变带有倾斜)
background-size:30px 30px;(每一块小组成部分固定宽度和高度)
但这样做的结果是只会形成一小块一小块的斜线，而不是整体div的斜线，因此我们需要以四个小div为一组绘制斜线，添加linear-gradient中的颜色分解：background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;
4、repeat-linear-gradient方法
对于斜线的背景绘制，使用repeat-linear-gradient方法更有效。使用该方法的时候，设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下：background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
通过这种方式可以任意更改角度，而不会出现上中方法中的调节困难background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);(这种方法其实相当于将size的控制和gradient的控制合到了一起)
5、颜色设定
有时我们希望条纹背景的颜色之间是相近的颜色，但是如果手动设定这个颜色的#很不方便，也很难发现要选择什么样的颜色。可以使用如下方法：background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1)15px,
transparent 0,transparent 30px);
这种方法的原理是：指定背景中最深的颜色，条文中其他相近色用透明度进行调整。目前最新版本的FireFox/Opera/Safari/Chrome浏览器以及使用同样的内核的国产浏览器都已能够支持gradient渐变样式。实际上CSS渐变与photoshop中的渐变功能是一样的原理，网页样式渐变也可以有无限种可能，以下是一组完整示例：
.patterns{
width:200px;
height:200px;
float:left;
margin:10px;
box-shadow:01px8px#666;
}
.pt1{
background-size:50px50px;
background-color:#0ae;
background-image:-webkit-linear-gradient(rgba(255,255,255,.2)50%,transparent50%,transparent);
background-image:linear-gradient(rgba(255,255,255,.2)50%,transparent50%,transparent);
}
.pt2{
background-size:50px50px;
background-color:#0ae;
background-image:-webkit-linear-gradient(toright,rgba(255,255,255,.2)50%,transparent50%,transparent);
background-image:linear-gradient(toright,rgba(255,255,255,.2)50%,transparent50%,transparent);
}
.pt3{
background-size:50px50px;
background-color:#0ae;
background-image:-webkit-linear-gradient(-45deg,
rgba(255,255,255,.2)25%,
transparent25%,
transparent50%,
rgba(255,255,255,.2)50%,
rgba(255,255,255,.2)75%,
transparent75%,
transparent);
background-image:linear-gradient(-45deg,rgba(255,255,255,.2)25%,transparent25%,transparent50%,rgba(255,255,255,.2)50%,rgba(255,255,255,.2)75%,transparent75%,transparent);
}
如果觉得《html中背景条纹效果 纯css3实现条纹背景方法（水平 垂直 倾斜）》对你有帮助，请点赞、收藏，并留下你的观点哦！
