如图所示,斜纹纹理具有简洁且美观的特性,被广泛应用于背景上。然而目前很多组件都有自适应的需求,所以以引用图片文件作为背景图的方式就不适用了,当容器的高度变高时,由于斜纹不能被纵向repeat,
会出现两种不满足条件的情况:
1、如果保持图片的缘由比例就会出现背景图纵向铺不满的情况;
2、如果让背景图填充满整个容器,就会出现背景图片被拉伸变形的情况;
由此可见这就需要使用css来定义样式了。
本文中将使用到的css属性:
1、background-color
这个没什么好说的,就是设置背景颜色,这不是本文重点就不着重说明了。请参考 www.w3school.com.cn/cssref/pr_b…
2、background-image
我们常用这个属性的url()方法来设置背景图片,然而本文的重点并不在于背景图片,所以直接看linear-gradient()这个方法
首先我们先了解一下css3渐变,渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。如下图所示:
CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法,但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。
linear-gradient() 语法说明:
这个函数(特性)接受的第一个参数是渐变的角度,他可以接受一个表示角度的值(可用的单位deg
、rad
、grad
或turn
)或者是表示方向的关键词(top
、right
、bottom
、left
、left top
、top right
、bottom right
或者left bottom
)。第二个参数是接受一系列颜色节点(终止点的颜色)。很明显,使用linear-gradient
是通过渐变的角度来控制渐变的方向。
示例一:创建一个简单的斜纹
显然这与我们的需求不相符,需要更多的颜色过渡点:
实现方法
代码:
简化版:
3、background-size
请参考 www.w3school.com.cn/cssref/pr_b…