html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享

通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下

一、横向条纹如下代码：background: linear-gradient(#fb3 20%, #58a 80%)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:background: linear-gradient(#fb3 50%, #58a 50%);

接下来可以通过设置背景的大小，让背景高度变小并且背景默认为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;

二、竖向条纹只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定background: linear-gradient(to rightright, #fb3 50%, #58a 0);

background-size:30px 100%;

三、斜向条纹可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹：

background: linear-gradient(45deg, #fb3 50%, #58a 0); //让背景的渐变带有倾斜

background-size:30px 30px; //每一块小组成部分固定宽度和高度

但这样做的结果是只会形成一小块一小块的斜线，而不是整体p的斜线，我们需要以四个小p为一组绘制斜线，添加linear-gradient中的颜色分解：background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);

background-size:30px 30px;

四、使用repeat-linear-gradient对于斜线的背景绘制，使用repeat-linear-gradient方法更有效。使用该方法的时候，设置的颜色变化会自动进行重复直到铺满整个p。实例代码如下：background: repeating-linear-gradient(45deg, #fb3, #58a