一、水平条纹效果:
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(#fb3 50%,#58a 50%);background-size:100% 100px;}</style></head><body><div>测试一下</div></body></html>
效果图:
二、垂直条纹效果:
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(to right,#fb3 50%,#58a 50%);background-size:100px 100% ;}</style></head><body><div>测试一下</div></body></html>
效果图:
三、斜向条纹背景:
尝试改写:
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(45deg,#fb3 50%,#58a 50%);background-size:100px 100px ;}</style></head>![在这里插入图片描述](https://img-/0814193954315.png)<body><div>测试一下</div></body></html>
但是实际却并没有出现想要的效果:
翻转是把平铺图案的基本单位全部翻转了,无法实现无缝拼接。水平或者垂直的时候,基本单位都是两条贴片,但斜向是四条贴片,对比如下图所示:
水平2贴片:
斜向4贴片:
修改后代码如下:
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(45deg,#fb3 25%,#58a 25%,#58a 50%,#fb3 50%,#fb3 75%,#58a 75%);background-size:100px 100px ;}</style></head><body><div>测试一下</div></body></html>
效果如图所示:
但是实际条纹宽度由于翻转,值为宽度除以√2(45度,其余角度额外算),要想得到最接近的样子,相对应的size乘这个数值即可(只能是近似,css不支持根号,一般取整或者保留一位小数)。
或者使用repeating-linear-gradient(不用写background-size了,可实现任意角度,但是条纹宽度仍然会变细 )也可以取到同样的效果,更推荐这一种方法,简单很多,也比较好理解)。
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: repeating-linear-gradient(45deg,#fb3,#fb3 50px,#58a 50px,#58a 100px);}</style></head><body><div>测试一下</div></body></html>
总之,不论角度是多少,创建双色条纹时都需要使用四个色标。
如果觉得《css:linear-gradient实现水平条纹背景 垂直条纹背景 斜向条纹背景》对你有帮助,请点赞、收藏,并留下你的观点哦!