css斜条纹背景——linear-gradient
话不多说，上图为敬
代码贴上（html代码就⼀个container，没写的）
body{
background: #243960;
}
.container{
margin: 200px auto;
width: 500px;
height: 500px;
background: linear-gradient(
margin属性值可以为百分比
45deg,
rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%,
rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent
);
background-size: 50px 50px;
}
接下来⼀个⼀个解析：
margin, width, height 这块⾃⼰随意定义，关键属性有两个——background中的linear-gradient 和 background-size。
先来linear-gradient，分析其属性，总共有9个属性
45deg外加8个后接百分⽐的颜⾊值。
45deg表⽰条纹倾斜⾓度，这个好理解。如果不加这个属性，就成了横条纹了，以此90deg就是竖条纹，可以组成花格条纹。
分析后⾯8个属性，总结出是由⼀个rgba颜⾊值和transparent外加百分⽐组成。
rgba颜⾊值是条纹的颜⾊，transparent其实也是颜⾊，不过是继承⾃⽗级的，⽽这⾥的⽗级颜⾊就是body的背景⾊（在这块代码⾥可以理解为⽆⾊透明≈rgba(0,0,0,0)）。
⽽百分⽐也⽐较好理解，不过需要串起来读：
0-25% 是条纹⾊
25%-50% 是⽗级颜⾊
50%-75% 是条纹⾊
75%-100% 是⽗级颜⾊
这⾥的细节最后⼀个transparent后没接百分⽐其实是表⽰transparent 1，也就是100%了。注：如果没有写⾓度属性，渲染是从top开始的，如果写的是0deg是从bottom开始的，⾓度值增加多少，则渲染开始点顺时针旋转多少。
接下来讲道理了，按照这个逻辑，那我们渲染的图⽚应该是这个样的
怎么成了第⼀张图的模样了？其实关键点是在后⾯⼀个属性background-size，以及默认值为repeat的background-repeat。
使⽤background-size: 50px 50px；就把上图的样式缩⼩到了50*50的⽅格⼦中。然后这样是⽆法铺满500*500的容器，另外background-repeat的默认repeat发挥作⽤，把渲染好的50*50⽅格⼦平铺重复渲染到500*500的容器⾥⾯。就做成了第⼀张图的效果。
了解到每个属性的作⽤，拓展起来就⽅便多了，如果要改变斜条纹线条的⼤⼩，只需要改变background-size的⼤⼩就⾏了。颜⾊也不⼀定要⽤rgba格式，另外如果要做双⾊条纹也只需要把transparent改成另外⼀个颜⾊就ok。三⾊条纹也简单
50% ÷ 3 ≈ 16.66%
所以代码是：
.container{
margin: 200px auto;
width: 500px;
height: 500px;
background: linear-gradient(
45deg,
red 0, red 16.66%, #fff000 16.66%, #fff000 33.33%, rgb(0, 0, 255) 33.33%, rgb(0, 0, 255) 50%,
red 50%, red 66.66%, #fff000 66.66%, #fff000 83.33%, rgb(0, 0, 255) 83.33%, rgb(0, 0, 255)
);
background-size: 50px 50px;
}
效果太辣眼睛就不贴了。
关于斜条纹就暂时到这⾥了，如果后期有更好玩的会持续更新

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。