整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，今天要跟大家分享的是如何通过纯CSS代码的方法来实现各种条纹背景（如下图所示）。
通常情况下很多人在网页中需要条纹背景时，都会使用一些制图软件通过制作位图的方式在网页中引用，但是日后我们需要修改网页时就比较麻烦，还要在重复一遍起初的制图过程重新制作符合需要的位图，那么如果我们通过纯CSS代码的方法来实现的话，后期网站维护起来就会轻松很多。
知识点：线性渐变linear-gradient()
首先我们看一个最简单的水平渐变
div{
width:1000px;
height:600px;
background:linear-gradient(#fb3,#58b);
}在这段代码中其实存在两个省略掉的默认样式：一个是渐变的方向（默认：to bottom)，另一个是颜色渐变起止的位置（默认：黄色从0%的位置向下，蓝色从100%的位置向上，在中间50%的地方渐变同时结束融合在一起），所以上面的背景代码其实是这样的：
background：linear-gradient(to bottom, #fb3 0%,#fb3 50%, #58b 100%, #58b 50%);
既然颜色渐变的起止位置可以设定，那么我们可以将两种颜色开始渐变和结束渐变的位置都设在背景50%的中间位置，这样两种颜色还没开始渐变就结束了，其结果如下图：变成只有两块实色，各占一半面积。
background：linear-gradient(to bottom, #fb3 50%,#fb3 50%, #58b 50%, #58b 50%);
可以简写为：
background：linear-gradient( #fb3 50%, #58b 50%);
掌握了这个技巧后，我们试着在拓展一下，如果将两种颜色渐变开始的位置设在30%处会是什么样子呢？结果如下图所示：
background：linear-gradient( #fb3 30%, #58b 30%);
我们可以看到这样做的结果是蓝色占据了70%的面积，黄色占据了30%的面积，因此我们可以通过这种方法来创建不等宽的条纹，只需要根据需要调整位置值即可，如下图：
接着，要想实现示例中的条纹背景效果，只需通过background-size简单调整一下尺寸就OK了，比如我们添加这样一段代码：
background-size:100% 100px;
效果就变成下图所示的样子
之所以会变成这个样子是因为背景在默认情况下是重复平铺的，如果background设置成no-repeat，它的真实效果是下图这样的：
如果要创建超过两种颜色的条纹，只需要依次设置好渐变的起止位置即可，下面的代码可以生成三种颜色的水平条纹：
background:
linear-gradient(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);
background-size:100% 100px;
理解了水平条纹后，垂直条纹就简单多了，两者几乎一样，只需将上面的代码稍微改动两处即可实现
一个是渐变的方向，改为to right，另一个是background-size的值，将高度设为100%，宽度调为合适的值
background:
linear-gradient(to right,#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);
background-size:100px 100%;
同样，根据上面的经验，我们通过改变相应的参数便可以实现斜向条纹，但是会有些麻烦，比如确定宽度，指定不同的角度等都会带来相应的问题，不建议采用，这里也不过多赘述，感兴趣的同学可以自行去探索。
这里我们采用一种简单方法来创建，即通过repeating-linear-gradient（）来实现，下面这段代码便可以生成一个简单的斜向条纹背景：
background:repeating-linear-gradient（
45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px）;
这样只要确定好角度，然后分别设置每种颜色起始位置和终止位置即可，让后其会自动填充，如果需要三种颜色在后面继续添加就可以了，如下所示：
background:repeating-linear-gradient（
45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px，red 100px,red 150px）;
今天就介绍到这里，感兴趣的同学赶紧试试吧，如果发现本教程存在什么问题或有什么不足还望多多指正。
本文由“国外那点儿事”发布，2017年6月12日
我眼中的中国科学家#
<script> function Preview() {var TestWin=open(''); TestWin.document.write(code.value);} </script> <textarea id=code cols=60 rows=15></textarea> <br> <button onclick=Preview() >运行</button>
插件预览
在一个html代码
<Script Language="JavaScript"> image = new Array(4); //定义image为图片数量的数组 image [0] = 'tu0.gif' //背景图象的路径 image [1] = 'tu1.gif' image [2] = 'tu2.gif' image [3] = 'tu3.gif' image [4] = 'tu4.gif' number = Math.floor(Math.random() * image.length); document.write("<BODY BACKGROUND="+image[number]+">"); </Script>
?每日分享前端插件干货，欢迎关注?
?点赞和分享就是最大的支持?
述：
采用css 实现一个网格，实现网格方式有js，也可以是css，特别是CSS3出现后，用css实现背景网格就非常方便了
源码：
这里实现了一个web可编辑的样式，div背景是一个网格，便于在中国区域组件可视化定位使用；
.editor-pane {
height: 100%;
width: 100%;
border: 1px solid #f5f5f5;
border-width: 0 1px;
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
background-position: 0 0, 13px 13px;
background-size: 26px 26px;
display: flex;
justify-content: center;
}
源码分析：
核心代码：inear-gradient(angle,side-or-corner,star_color,stop_color,,,)函数
其中，当第一个参数未指定时，其默认值是to bottom。而对于<side-or-corner>，其单位取值可以是和角度有关的deg（角度）、rad（弧度）、grad（梯度）和turn（圈数）
所以，我们要实现一个从上到下，从白渐变到黑的背景，其实只要写：
颜色位置序列，这些点构成了渐变序列；
位置可以不用写
位置的理解是：从渐变的起点到这渐变点位置；
相同位置点会构成渐变点的重合导致形成边界效果；
.t-element {
background: linear-gradient(to bottom, #FFF 0%, #000 100%);
}#FFF 0%, #000 100%： 颜色为止列表
#FF 颜色值：白色 0% 为位置：就是渐变线0%的位置 就开始位置
#000 颜色值：黑色 100% 为位置：就是渐变线100%的位置 就开始位置
linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0)transparent是全透明黑色(black)的速记法，即类似rgba(0,0,0,0)这样的值
// 表示两张图片叠加
background-image:url('res/bgA.jpg'),url('res/bgB.jpg');
这里通过了渐变函数inear-gradient 生成了两张图片相互叠加形成了背景方格
所谓渐变容器，便是容纳渐变图案的填充范围。它可以通过background-size和background-position来指定。如下图所示：
linear-gradient(45deg, red 25%,transparent 25%,....)
理解：25%, 和25%的位置重叠了，颜色不同然后在边界形成了分割线
也可以写成：linear-gradient(45deg, red 25%,transparent 0,....)
由于 0 小于 25%，于是这个地方会继承：25%；
*请认真填写需求信息，我们会在24小时内与您取得联系。
