失眠网 > html中背景条纹效果使用CSS线性渐变制作条纹背景

html中背景条纹效果使用CSS线性渐变制作条纹背景

时间：2020-04-11 23:48:57

主要使用的属性 linear-gradient

background:linear-gradient(#000,#ccc);

Paste_Image.png

取消中间的渐变过度

background:linear-gradient(#000 50%,#ccc 50%);

Paste_Image.png

如果多个色标具有相同的位置值(就是颜色后面跟的百分比),他们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值，从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程

通过background-size来调整尺寸

background:linear-gradient(#000 50%,#ccc 50%);

background-size:100% 30px;

Paste_Image.png

应为背景色默认是repeat的，所以会出现斑马条纹

不等宽条纹

background:linear-gradient(#000 30%,#ccc 30%);

Paste_Image.png

这个后面的30%为什么会占用这个30px高度的百分之70%(我的理解是后面的这个30%代表的是从这个位置，一直到100%都是使用这个颜色)

另外一种写法background:linear-gredient(#000 30%,#ccc 0); 这个后面的‘0’的解释是:如果某个色标的位置值比整个列表中在它前面的色标的位置值都要小(就是这个0是比它前面的所有百分比都小)，则该色标的位置值会被设置为它前面最大的位置值的最大值(就是这个0其实现在等于30%)，如果是这样的(#000 20%,#ccc 40%,#ffa 0)，那这个0就是40%

垂直条纹

background:linear-gradient(to right,#000 50%,#ccc 0);

background-size:30px 100%;

Paste_Image.png

斜向条纹

background:linear-gradient(45deg,#000 50%,#ccc 0);

background-size:30px 30px;

Paste_Image.png

这个办法行不通，原因是我们只是把每个贴片旋转了45deg(就是30*30的背景)，而不是把整个背景都旋转了。如果要做成斜向条纹，我们要为贴片设置四条条纹，而不是两条，只有这样才有可能做到无缝拼接

Paste_Image.png

linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0)

background-size:30px 30px;

Paste_Image.png

如果给中间加上一个白色的框，就可以出现条纹背景的效果了

.wrap{width:200px;height:300px;background:linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);background-size:30px 30px;padding:10px;box-sizing:border-box;}

.fff{width:180px;height:280px;background:#fff;}

信封效果

更好的斜向条纹

前面展示的方法其实不够灵活，如果我们需要的不是45度的条纹怎么办，如果直接改45这个数字，就是出现下面的效果

background:linear-gradient(60deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);

background-size:30px 30px;

都没眼看了

这里要介绍一个加强版的线性渐变 repeating-linear-gradient()，其实它的工作方式和前面的一样，只是有一点不同：色标是无限循环重复的，直到填满整个背景。

background:repeating-linear-gradient(45deg,#000,#ccc 30px);

/*background-size:30px 30px;(不需要加background-size了)*/

Paste_Image.png

改写一下