<body>
<div class="bg type1">background: linear-gradient(#fb3 20%, #58a 80%);<br>整个背景上下各有 20%的纯色, 中间是过渡颜色
background: linear-gradient(#fb3 50%, #58a 50%);
上下两部分都是纯色
添加 background-size:100% 30px;
宽 100%, 高 30px, 默认 repeat
斜向条纹
修改 linear-gradient 的角度: linear-gradient(45deg, #fb3 50%, #58a 50%)
添加重复:background-size:30px;
使用 repeat-linear-gradient:
background: repeating-linear-gradient(45deg, #fb3, #58a 30px)
<
div class=”bg type6”>
关于颜色设定, 如果我们希望条纹使用相近的颜色, 可以使用如下方法:
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);
其原理是指定背景中最深的颜色, 其他颜色用透明度调整
<
div>
