CSS3颜色值RGBA与渐变色使用介绍


Posted in HTML / CSS onMarch 06, 2020

CSS3之前渐变色图片只能用背景图片
CSS3的渐变色语法可以让我们省去下载图片的开销
并且在改变浏览器分辨率时有更好的效果

颜色值RGBA

我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色
取值0~255,或0~100%

rgba就是在rgb基础上增加了alpha不透明度参数
 

例子1、正常的红色rgb颜色

.demo {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}

CSS3颜色值RGBA与渐变色使用介绍

例子2、使用rgba 红色半透明效果

.demo {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.5);
}

CSS3颜色值RGBA与渐变色使用介绍

alpha取值0~1,值越小越透明一般 0.2-0.5居多

线性渐变linear-gradient

gradient是“倾斜度”的意思,linear是“线性的”的意思
渐变色就是在多个颜色间平稳过渡,形成绚丽的色彩
线性渐变linear-gradient参数有渐变的方向(选填)和任意个渐变色

例子3、红绿蓝渐变色

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red,lime,blue);
}

注意我这里写的是background不是background-color
(其实渐变色是background-image的函数)

CSS3颜色值RGBA与渐变色使用介绍

不填写渐变方向默认是从上到下

渐变方向有以下属性值
to top、to bottom(默认)、to left、to right
to top left、to top right、to bottom left、to bottom right
或者填写角度 xxxdeg
比如to top left就代表方向朝向左上

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(to top left,red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

角度0deg与to top等价,增加角度,相当于顺时针旋转

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(20deg,red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

在每一个颜色的后面可以添加各个颜色渐变的位置

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 30%,lime 50%,blue 70%);
}

CSS3颜色值RGBA与渐变色使用介绍 

CSS3颜色值RGBA与渐变色使用介绍

如果不填的话,浏览器就默认均分了,比如三个色值默认就是0%,50%,100%

还有一个不常见的函数repeating-linear-gradient使我们可以重复线性渐变

.demo {
    width: 100px;
    height: 100px;
    background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);
}

CSS3颜色值RGBA与渐变色使用介绍 

结果就画出了这样巨丑无比的渐变色

径向渐变radial-gradient

radial意思是“径向的、辐射状的”
就是一个渐变中心向外放射渐变

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

和线性渐变类似
不过第一个参数(选填)是径向渐变的渐变形状、位置
可以使用圆形circle、椭圆形ellipse(默认)

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle,red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

可以使用shape at postion的格式定义渐变中心的位置

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%,red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

渐变位置可以使百分数形式,也可以是像素形式
如果只写一个值时,另一个值默认是中间位置50%

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30%,red,lime,blue);
}

CSS3颜色值RGBA与渐变色使用介绍

渐变尺寸如果你不想用关键字,也可用用数字形式

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);
}

表示渐变尺寸100px*100px,渐变位置50px*50px

CSS3颜色值RGBA与渐变色使用介绍

径向渐变同样有一个重复渐变的函数
用法和线性渐变的类似,这里就不多解释了

.demo {
    width: 200px;
    height: 100px;
    background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);
}

CSS3颜色值RGBA与渐变色使用介绍  

到此这篇关于CSS3颜色值RGBA与渐变色使用介绍的文章就介绍到这了,更多相关CSS3 RGBA与渐变色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
You might like
php 无极分类(递归)实现代码
2010/01/05 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
python Paramiko使用示例
2020/09/21 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
双十佳事迹材料
2014/01/29 职场文书
服务明星事迹材料
2014/12/29 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
志愿者工作心得体会
2016/01/15 职场文书
个人业务学习心得体会
2016/01/25 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
Redis实现订单过期删除的方法步骤
2022/06/05 Redis