CSS3 背景线性渐变 Linear Gradients 介绍

发布于 2018-09-13 字数3368 浏览 901 评论 0

CSS3 线性渐变是 CSS3 中最简单的一种应用,可以免去我们频繁的去修改背景图,可以无限拉大背景的区域,而不用去考虑背景图是否清晰,因为是程序自动生成的,所以算的上是一种矢量的图,如果你对 Canvas 熟悉,你也可以使用这个绘图工具去制作一个背景图当然,使用 CSS3 的样式控制是最简单的了。

CSS3中使用渐变,每个浏览器实现的方法有所不同,主要分为两种,下面给大家介绍下。

webkit 内核的 Linear Gradients

-webkit-gradient 是 background 的一个属性值;

webkit 内核的 safari、 Chrome 的 Linear Gradients 线性渐变基本语法:

background-image:-webkit-gradient(type, x1 y1, x2 y2, from(开始颜色值), to(结束颜色值), [color-stop(偏移量小数, 停靠颜色值), ...] );

参数

webkit 内核的 Linear Gradients 线性渐变第一组参数 type(类型)为 linear

第二组参数是 x1 y1, x2 y2,颜色开始点和颜色结束点的坐标。x1, x2, y1, y2 的取值范围为 0%-100%,x1 和 x2 也可以取值 left(或0%)或 right(或 100%),同样 y1 和 y2 可以取值 top(或 0% )或 bottom(或 100% );

  • 当 x1 等于x2,y1 不等于 y2,实现垂直渐变,调整 y1、y2 的值可以调整渐变半径大小
  • 当 y1 等于 y2,x1 不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小
  • 当 y1 不等于 y2,x1 不等于 x2,实现角度渐变
  • 当 x1 等于 x2,y1 等于 y2,实现没有渐变,取 from 色,即 from(#F54D54)

from(开始颜色值), to(结束颜色值) 是两个渐变颜色值;

[color-stop(偏移量<小数> ,停靠颜色值), …]:可以使用多个 color-stop,如果渐变只有 2 个颜色,那么可以不使用该参数;偏移量必须为小数,

如果偏移量 >=1 那么该 color-stop 相当于无效;

演示

div {
    width:200px;
    height:200px;
    border:1px solid #CCC;    
    background-image: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#000), to(#FFF), color-stop(0.3, #336600), color-stop(0.5, yellow));
}

效果

注意:红线上的颜色值都是相同的,并且和绿色的线保持垂直。

Firefox 的 Linear Gradients

-moz-linear-gradient 是 background 的一个属性值;

Firefox 的Linear Gradients 基本语法:

background-image:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数

Point:渐变出发的点(开始点)。

单位可以是百分比,也可以是像素。或使用 left、center、right 进行水平定位,也可以使用 top、center、buttom 进行垂直定位。这点非常像 background-position。

angle:渐变出发的方向,它代表的是渐变方向和水平线之间的夹角,逆时针方向。

stop:渐变停靠点,它有两部分组成 <color, pos>,pos 为 0~100% 之间的值。注意 0% 代表的是起始点,100% 代表的是结束点。

演示

div {
    width:200px;
    height:200px;
    border:1px solid #CCC;
    background-image: -moz-linear-gradient(50% 180px 90deg, #000000 0%, #FFFFFF 30%, #336600 60%,#662C13 90%)
}

效果

注意:如果不指定第二个Stop点的位置(30%),他会介于第三个 Stop 和第一个 Stop 点中间。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!