对于网页设计师而言,颜色渐变在网页设计中十分常见,而对于网页制作者来说,通常的方法就是把渐变切成图片来实现。伴随着css3的出现,实现背景颜色渐变,图片不再是唯一的实现方式。虽然IE浏览器还没有实现,但Mozilla和webkit内核的浏览器已经接受了这一实现方式。在这里面,我分别就这两种内核的浏览器进行讲解。
一、以firefox为代表的mozilla内核的浏览器(注意,以下的图请有firefox浏览器下查看)
firefox的linear gradient(线性渐变)的几点说明:
1)基本语法:
background-image:-moz-linear-gradient( [<point>||<angle>], 开始颜色值, 结束颜色值, [(停靠颜色值,偏移量百分数),...] );
1、-moz-linear-gradient是background的一个属性值;
2、它的第一组参数<角度位置>非常灵活,他的基本组成点位<point>(渐变的出发点)和角度,它可以被指定为一个百分比,像素,或者使用”left”,”center”,”right”的水平和”top”、”center”、”buttom”的垂直定位。位置从最爱影响的元素左上角开始。如果只在水平渐变的话,只要设置:”left center”或”right center”,如果垂直渐变的话,设置为”center top”或者”center bottom”。firefox下可以省略掉center。
background-image:-moz-linear-gradient(left center,#fff800,#f60);
background-image:-moz-linear-gradient(right center,#fff800,#f60);
background-image:-moz-linear-gradient(top,#fff800,#f60);
3、如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第二个是垂直渐变位置,这个时间还需要一个角度值,比如“90deg”,你也可以随意改动大小来查看显示结果。
background-image:-moz-linear-gradient(180deg,#fff800,#f60);
background-image:-moz-linear-gradient(0deg,#fff800,#f60);
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue);
二、以chrome为代表的webkit内核的浏览器(注意,以下的图请在chrome浏览器下查看)
webkit内核的浏览器有safai、chrome的linear gradient(线性渐变)的几点说明:
1)基本语法:
background-image:-webkit-gradient( type, x1, y1, x2, y2, from(开始颜色值), to(结果颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
-webkit-gradient( type, start_point, end_point, stop... )
type | 渐变的类型,分为线性渐变(linear)和径向渐变(radial) |
start_point | 渐变图片中渐变的起始点 |
end_point | 渐变图像中渐变的结束点 |
stop | color-stop()方法,指定渐变进程中特定的颜色 |
inner_center | 内部中心点,径向渐变起始圆环 |
inner_radius | 内部半径,径向渐变起始圆 |
outer_center | 外部渐变结束圆的中心点 |
outer_radius | 外部渐变结束圆的半径 |
1、start_point(x1,y1),end_point(x2,y2),这里的x,y对应左上角为起点的坐标,此处的x,y参数表示与css中的background-position是一致的,可以使用像素、百分比或者left,top,right,bottom。
当x1 = x2,y1 ≠ y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
bbackground-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#fff800), to(#f60));
当y1 = y2,x1 ≠ x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
bbackground-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60));
当y1 ≠ y2,x1 ≠ x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
bbackground-image:-webkit-gradient(linear,10% 30%, 100% 100%, from(#fff800), to(#f60));
当x1=x2,y1=y2,没有渐变。
2、color-stop是一个过渡点,相当于ps里面,多添加一个渐变的点,有两个参数,一个是点的位置,另外一个是过渡点的颜色。
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60),color-stop(20%,#fff));
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));
3、创建径向渐变
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#fff800), to(#f60), color-stop(90%, #c00));
相关推荐
线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果,我们一般在css3中使用新增的gradients属性实现这个效果,我们根据渐变的方向分为从上至下、从右至左和对角渐变,其中默认的方向是从上向下渐变。...
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。
这是一款可以在线生成CSS3渐变背景颜色代码的可视化插件。你可以通过调节界面上给出的颜色、色相、饱和度和亮度滑块,以及渐变方向滑块来生成各种线性渐变,屏幕上会给出相应的CSS3线性渐变代码。
纯css实现兼容各浏览器的颜色线性渐变,对角渐变,渐变角度设置,线性渐变透明度,及渐变方向、隔行变色等,支持设置结点渐变的效果。
本文只介绍线性渐变 背景渐变相信大家也都不陌生先看下图 小编配的这个色也还可以哈 代码如下 body{ background-image: -webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904))...
项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根据用户输入的颜色值生成不同...
uni-app nvue沉浸式状态栏(线性渐变色).vue
我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 图像。它是css3中的语法,最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff5000); direction:用于...
webkit内核的safari、 Chrome的Linear Gradients (线性渐变);webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;第二组参数是“x1 y1, x2 y2”,颜色开始点和颜色结束点的坐标, 感兴趣的...
线性渐变CSS :paintbrush:我一直很喜欢在项目和应用程序中使用线性渐变,因此我做了这个个人项目,目的是帮助选择颜色。 选择两种颜色的选项; 选择盎格鲁的选项; 提供可以放置在项目中的RGB线性渐变代码; 直接...
colorful-background-css-generator, 彩色css渐变 background 生成器 彩色css渐变 background-生成器用于创建彩色css背景的纯javascript生成器。检查这里网站查看生成器中的操作并使用颜色设置进行播放。它的思想是...
css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之前的线性过度,这个css3属性只支持高版本的浏览器。 //浏览器前缀 background: linear-gradient(red, blue); background: -webkit-linear-...
跟线性渐变一样,一组颜色设定表示渐变过程。没什么好讲的,后面将统一用 [red, #fff 99%, blue] 这个渐变组合,表示从红色变换到白色,最后以一个1%蓝色结束,方便查看边缘。 用法 background-image:radial-...
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了。 这次我们主要用到的网站是Hero Patterns——免费在线纹理素材库 这个网站中有很多现成的...
本文介绍的利用纯CSS3实现文字向右循环闪过效果的相关资料,下面话不多说,大家先来看看示例代码吧。 示例代码: <!DOCTYPE html> <... ... /* 背景颜色线性渐变 */ /* 老式写法 */ /* linea
范本包括2个示例: -在模板内的元素上使用渐变-身体背景渐变兼容性模板使用CSS background-image线性渐变以及Outlook的VML后备功能,这意味着它可以在所有电子邮件客户端的87%以上使用(可能甚至更多,Mac的许多...
颜色发生器 背景颜色生成器支持随机颜色,手动颜色选择以及线性渐变和径向渐变之间的切换
很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,本例使用css3:linear-gradient及ie 滤镜:filter来实现
经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。 下面是当前五大浏览器对 gradient 的...