我们在开发的过程中经常会遇到背景色是渐变的背景色,一般可以制作背景图,如果仅仅是简单的线性变换的背景,今天我就遇到了,其实完全可以用CSS3的渐变来实现这个效果。这个过程由浏览器来生成,不用去加载静态的资源,提高性能。
渐变有两种:
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变也是比较常见的渐变方式
为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
基础的语法就是这样的:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
默认的是从上到下的加入你不设置方向的话
#grad { background-image: linear-gradient(#e66465, #9198e5); }
从左到右
#grad { background-image: linear-gradient(to right, red , yellow); }
从左上角到右下角
#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }
还有一种是带有角度的自定义的渐变
#grad { background-image: linear-gradient(-90deg, red, yellow); }
当然还有多个颜色的渐变
#grad { /* 标准的语法 */ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }
CSS3的渐变还支持带有透明度的写法
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
重复的线性变化(其实这个也有的地方用到)
#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }
下面的是径向渐变
emmmmmmm我不用我也不想写,哈哈哈哈
就写一个基础的用法吧!!!
background-image: radial-gradient(shape size at position, start-color, ..., last-color);