首页 > 代码库 > css 条纹背景
css 条纹背景
先介绍文章用到的二个知识点
background-size 属性
语法
background-size: length|percentage|cover|contain;
| length |
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
css线性渐变
linear-gradient(to <side-or-corner>)||<angle>,<color-stop>,<color-stop>)
<side-or-corner> = [left | right] || [top | bottom]
用角度值指定渐变的方向（或角度）。
<color-stop> = <color> [ <length> | <percentage> ]
background: linear-gradient(to top,red ,blue );
我们再改下代码：
background: linear-gradient(to top,red 50% ,blue 50%);
background-:
效果图变为：
再改写：
background: linear-gradient(to top,red 50% ,blue 50%);
background-size:100% 30px ;
水平条纹出现
将颜色后面的百分比即色标所在的位置重合，形成了水平条纹效果。
假如写超过二种颜色也是可以的：
background: linear-gradient(to top,red 33.3% ,blue 0%,blue 66.7%,pink 0);
background-size:100% 90px ;
垂直条纹
原来同水平条纹，只需改下background-size和linear=gradient渐变方向
background: linear-gradient(to right,red 33.3% ,blue 0%,blue 66.7%,pink 0);
background-size:90px 100% ;
难点：斜向条纹
css 条纹背景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。