css3 background 条纹 背景 渐变
linear-gradient是background-image属性下的参数,在网上找遍了许多教程讲的都很详细
但是往往都没有讲到重点,说的也长篇大论。花了几十分钟看完也没看懂那些参数具体是
怎么实用。这里图文并茂讲解快速上手linear-gradient。
首先看下这个效果:
这里教大家如何用CSS3代码绘画出这个图案,例子简单重点是叫大家里面的参数具体是什么意思
1,首先做出一个小图片
background-image: linear-gradient(135deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%, #0ae 67%,#0ae 83%, #fff 84%); background-image: linear-gradient(顺时针角度, 开始颜色 结束位置, 中间颜色1 开始位置,中间颜色1 结束位置, 中间颜色2 开始位置,中间颜色2 结束位置, 中间颜色3 开始位置,中间颜色3 结束位置, 结束颜色 开始位置); 如果数字不是连续的,他们之间存在数值差,那么数值差的之间的两种颜色默认就是渐变效果。
(*注意:百分比指的不是大小而是位置,可以用PX 来代替)
此时绘制完的只是一张单张的图片想实现图1的效果需要追加入以下属性
background-repeat:repeat; background-size:50px 50px;
写到这里应该会明白了吧,只要做出一个小图片剩下的就是平铺。
http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html