CSS 原生颜色渐变背景参数(linear-gradient|radial-gradient)使用范例

小助手读文章 00:00 / 00:00

温馨提示:
本文所述内容不具普遍性,可能因操作环境差异而与实际有所出入,故请勿照搬照抄,仅供参考。

今天在调教背景时发现了 CSS 原生颜色渐变背景参数,使用起来比 PhotoShop 创建渐变图片简单多了,下面一起来看看。

原理

CSS 渐变背景原理可以认为是浏览器在渲染时即时创建的颜色线性渐变图像,所以渐变背景使用的是 background-image 属性:

background-image: linear-gradient( 角度 , 颜色 , 颜色);

线性渐变是最基本的渐变类型,是指在一个方向上从一种颜色过渡到另一种颜色,这个方向由角度指定,或者使用关键字 to + ( top | bottom | right | left ) 指定。

示例

方向渐变

直向渐变

body {
  background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}

这行代码是指 从左边的紫色过渡到右边的绿色。

body {
  background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
}

这行代码是指 从顶部的紫色过渡到底部的绿色。

斜向渐变

body {
  background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);
}

这行代码是指 从左上角的紫色过渡到右下角的绿色。

精确渐变

是指 CSS 渐变支持任意指定方向的渐变,通过角度值(0~360deg,坐标系方向)来指定:

body{
  background-image: linear-gradient(45deg, #7A88FF, #7AFFAF);
}

这行代码是指 从左下角的紫色过渡到右上角的绿色。

在线调试:Explaining gradient angles

多颜色渐变

是指如果添加多种颜色参数,那么背景会从第一种颜色过渡到第二种颜色,再从第二种颜色过渡到第三种颜色,直到渐变的最后一种颜色为止。

平均渐变

body{
  background-image: linear-gradient(to right, black, white, black);
}

这行代码是指 从左到右黑色、白色、黑色渐变,每种颜色宽度一致。

精确渐变

是指可以指定每种颜色的渐变宽度:

body {
  background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);
}

这行代码是指 从左到右渐变,最左边是玫红,在元素宽度 20% 的位置变成青色,80% 的位置变成黄色,最后是蓝色。

第一种颜色和最后一种颜色无需指定位置,因为浏览器会默认第一种颜色从 0% 的位置开始,最后一种颜色在 100% 的位置结束。除非想把第一种颜色或最后一种颜色的位置放在指定的位置开始,才需要专门定位。

body {
  background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%);
}

这行代码是指 从左到右渐变,由于第一种颜色值(#E94E65)也有位置值(20%),因此,元素横向前 20% 宽度的背景色是纯粉红色(#E94E65)。

叠加渐变

CSS 渐变是支持各种颜色、各个方向叠加的,其中,最先用到的会在最上层。

body {
  background-image: 
    linear-gradient(to bottom, cyan, transparent),
    linear-gradient(225deg, magenta, transparent),
    linear-gradient(45deg, yellow, transparent);
}

重复渐变

在普通的渐变基础上多了一个重复的效果,即平铺的线性渐变。

body {
  background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);
}

这行代码是指 浏览器从左下角开始绘制渐变,前 20 像素是绿色,此后直至 30 像素的位置过渡到紫色,然后直至 40 像素的位置再过渡到绿色,绘制完这个渐变后,浏览器会像平铺图像那样把这个渐变铺满整个背景。

圆周渐变

即沿着圆周或者椭圆周向外扩散的渐变。

椭圆渐变

body {
  background-image: radial-gradient(#99CCCC, #7171B7);
}

这行代码是指 浏览器在元素的显示范围内创建一个椭圆形,把渐变的中心点(绿色)放在元素的中心上。

圆周渐变

body {
  background-image: radial-gradient(circle,#99CCCC, #7171B7);
}

这行代码是指 浏览器在元素的显示范围内创建一个圆形,把渐变的中心点(绿色)放在元素的中心上。

指定中心渐变

可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值,指定渐变中心的位置。

body {
  background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7);
}

这行代码是指 中心点设置在元素的左上方(20% 20%)位置处。

注意: IE9 及之前版本均不支持渐变,如果一定要使用渐变,建议提供后备颜色:

body {
  background-color: #FC0;
  background-image: linear-gradient(to bottom, #900, #FC0, #900);
 }

参考文章:

1、《【CSS】渐变背景(background-image)


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 typechohtmlCSS渐变颜色 的文章

 本文最后更新于 2019/04/29 15:26:34,可能因经年累月而与现状有所差异

 引用转载请注明: VirCloud's Blog > 建站 > CSS 原生颜色渐变背景参数(linear-gradient|radial-gradient)使用范例