颜色之RGBA

RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法:

color:rgba(R,G,B,A)

以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。

代码示例:

background-color:rgba(100,120,60,0.5);

渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变:

参数:

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

第一个参数省略时,默认为“180deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图:

第3章 css属性color的RGBA值的更多相关文章

  1. CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...

  2. 前端开发工程师 - 01.页面制作 - 第4章.CSS

    第4章.CSS CSS简介 Cascading Style Sheet 层叠样式表:定义页面中的表现样式 history: CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多 ...

  3. 其他css属性和特性

    其他css属性和特性 设置元素的颜色和透明度 下表列出了这些属性. 颜色相关属性 属 性 说 明 值 color 设置元素的前景色 <颜色> opacity 设置颜色的透明度 <数值 ...

  4. 【CSS】其他CSS属性和特性

    1. 设置元素的颜色和透明度 前面有介绍CSS颜色的各种用法,如 background-color属性.boder-color属性等.还有另外两个与颜色有关的属性. 1.1 设置前景色 color属性 ...

  5. 第 19 章 CSS 其他样式

    学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式,包括颜色.透明度.盒子的阴影轮廓以及光标的样式. 一.颜 ...

  6. 第 12 章 CSS 入门

    学习要点: 1.使用 CSS 2.三种方式 3.层叠和继承 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一.使用 ...

  7. 整理 W3CSchool 常用的CSS属性列表

    近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...

  8. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  9. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

随机推荐

  1. 「案例」让房东在 Airbnb 上展示他们的热情好客

    如何才能让房东准确的描述自己的房源,如何才能让房东充分的展示自己的房源.Airbnb 在这次更新里尝试去解决了这两个问题,让我们跟随作者的文笔去了解一下整个项目的经过. 关于本文 原文作者:Cecil ...

  2. javascript 私有化属性,和公共属性

    function TestClassA(name, number) { this.name = name; //public this.number = number; //public var ac ...

  3. 运算符重载入门demo

    #include "pch.h" #include <iostream> using namespace std; class A { public: A(int x, ...

  4. Springboot第一篇:框架了解与搭建

    在上一章,我讲解了React+node+express相应的框架搭建,一个项目只有一个前端框架够么,当然不够啦!!! 所以这节我们就来讲后台springboot框架的搭建和相关原理吧~~~版本(2.1 ...

  5. oracle12c之四 控制PDB操作 PDBLockdown Profiles

    除了IO.内存.CPU之外,还有一些限制,比如:限制在pdb中的操作命令,我们可以创建一个lockdown profile来限制对当前PDB的操作,增强某些操作的安全性.   关于PDB Lockdo ...

  6. 【云计算~Pig】一、基本语法

    加载与存储 LOAD 将数据从外部文件或其它存储中加载数据,存入关系 STORE 将一个关系存放到文件系统或其它存储中 DUMP 将关系打印到控制台 过滤 FILTER 从关系中删除不需要的行 DIS ...

  7. 【Qt开发】01-第一个Qt程序Hello World!

    一:说在前头 我的第一份工作是做生产工具,当时用的MFC,IDE是VC6.0,现在想想真是古董级别,10年至今,微软也一直没有对MFC进行升级, 冥冥中感觉微软自己都放弃MFC了,市场上貌似MFC的岗 ...

  8. oracle系统包——dbms_transaction用法

    用于在过程,函数和包中执行sql事务处理语句. 1.read_only用于开始只读事务,其作用与sql语句set transaction read only完全相同2.read_write用于开始读写 ...

  9. Windows下SVN回滚到旧版本(TortoiseSVN)

    当发现新提交的代码有问题,然后想将某个旧的版本作为最新的版本时,可以使用回滚, 操作步骤如下: 1. 签出(CheckOut)最新版本的代码到电脑中(不能做任何修改) 2. 执行TortoiseSVN ...

  10. Swift编程权威指南第2版 读后收获

    自从参加工作一直在用OC做iOS开发.在2015年的时候苹果刚推出swift1.0不久,当时毕竟是新推出的语言,大家也都很有激情的学习.不过在学完后发现很难在实际项目中使用,再加上当时公司项目都是基于 ...