CSS3学习系列之颜色

（1）RGBA

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

语法：

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

实例

background-color:rgba(100,120,60,0.5);
（2）渐变色彩

CSS3 Gradient 分为线性渐变（linear）和径向渐变（radial）.由于不同的渲染引擎实现渐变的语法不同。

语法：

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

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

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

角度的话记住后面的就行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RGBA colors</title>
<style type="text/css">
body{background:url(http://static.mukewang.com/static/img/logo_index.png)}
p{font-size:42px;text-align:center;font-weight:bold;background:rgba(255,255,255,0.5);
} span{width: 400px;height: 150px;line-height: 150px;text-align:center;color: #000;font-size:24px;background-image:linear-gradient(to top left,red, orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<p>背景半透明的？</p><span>右下角向左上角的线性渐变背景</span>
</body>
</html>

转载于:https://www.cnblogs.com/Gabby/p/5378808.html

CSS3学习系列之颜色相关推荐

directX学习系列8 颜色融合（转）
1, Multipass(多通道) 将一个任务划分成几个阶段,由多个pass处理不同阶段,后续pass总是处理前一个pass的结果.例如复杂的光照方程可以分成几个pass来计算. 用不同的 ...
【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签文本标题标签 h 段落标签 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
Java云同桌学习系列（十三）——前端技术之HTML与CSS
本博客java云同桌学习系列,旨在记录本人学习java的过程,并与大家分享,对于想学习java的同学,可以跟随我的步伐一起学习,我希望这个系列能够鼓励大家一同与我学习java,成为"云同桌& ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
01LaTeX学习系列之---TeX的介绍与认识
目录 01TeX的介绍与认识目录前言 (一)TeX 的宣传 TeX - Beauty and Fun 1. TeX 是什么? 2. TeX 是哪家公司生产的? 3. 我们今天主角的名字怎么念啊?& ...
[GAN学习系列3]采用深度学习和 TensorFlow 实现图片修复(上）
在之前的两篇 GAN 系列文章–[GAN学习系列1]初识GAN以及[GAN学习系列2] GAN的起源中简单介绍了 GAN 的基本思想和原理,这次就介绍利用 GAN 来做一个图片修复的应用,主要采用的也 ...
【深度学习系列】——神经网络的可视化解释
这是深度学习系列的第三篇文章,欢迎关注原创公众号 [计算机视觉联盟],第一时间阅读我的原创!回复 [西瓜书手推笔记] 还可获取我的机器学习纯手推笔记! 深度学习系列 [深度学习系列]--深度学习简介 ...

CSS3学习系列之颜色

CSS3学习系列之颜色相关推荐

最新文章

热门文章