颜色之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. linux用到的命令

    命令行下利用别名打开ss以及设置相关代理(写到~/.bashrc中使永久有效) #open proxy alias proxystart='gsettings set org.gnome.system ...

  2. leetcode-766-Toeplitz Matrix(每一条对角线元素的比较)

    题目描述: A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now ...

  3. #PHP 数组添加元素、统计数组相同元素个数、改变数组key值~_~

    一.数组添加元素 1.定义和用法: array_push() 函数向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度. 2.语法: array_push(array,value1, ...

  4. POJ_3368 Frequent values 【线段树+区间查询】

    一.题面 POJ3368 二.分析 仍然是一道只需要区间查询不需要区间修改的线段树题. 这题的题面比较特别,它是一组非减的数组.当需要去找一段区间内出现次数最多的数字时,这些数字必然是连续的,那么就可 ...

  5. 解决NTFS文件系统下的文件/文件夹属性中没有安全选项卡的问题

    注册表项: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer 键:NoSecurityTab ...

  6. Python——付费/版权歌曲下载

    很多歌曲需要版权或者付费才能收听 正确食用方法: 1.找到歌曲编号 2.输入编号并点击下载歌曲 # coding:utf8 # author:Jery # datetime:2019/4/13 23: ...

  7. 2.6 Rust Slice Type

    字符串操作 fn first_word(s: &String) -> usize { let bytes = s.as_bytes(); for (i, &item) in by ...

  8. element-ui日期组件DatePicker选择日期范围赋值编辑问题

    最近在项目中使用element-UI的日期范围组件时遇到一个问题,相信很多人也做过这种场景,一个录入页面也同时是编辑页面,编辑的时候就需要先赋值.但是我给date组件赋值后,确无法操作了,change ...

  9. sort sorted() reverse() reversed() 的区别1

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...

  10. JDK,JRE,JVM的基础理解

    1.JVM -- java virtual machine JVM就是我们常说的java虚拟机,它是整个java实现跨平台的 最核心的部分,所有的java程序会首先被编译为.class的类文件,这种类 ...