CSS3 RGBA colors使用说明

RGBA是对原始的RGB的扩展,它加入了第四个参数:alpha通道。alpha通道参数采用0 到1之间的小数,就像opacity那样。使用RGBA而不是opacity的优势是,当使用RGBA的时候,透明不会被应用到子元素。这也就一位着,你可以在一个透明对象里面使用一个完全不透明的子对象,而当你使用opacity的时候,透明对象的子元素也是透明的。

RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

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

兼容:Firefox 3.0.10 Chrome 2.0.x Opera 9.64 Safari 4 Firefox 3.5

如以下代码:div { background: rgb(255,0,0); /* The old one */ background: rgba(255,0,0,0.5); /* The new one */ }

那么在IE中怎么办呢:请看下面:

<!--[if IE]>
<style type="text/css">
.color-block {  background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#99000050,endColorstr=#99000050);
 zoom: 1;  }
</style>
 <![endif]-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>RGBA colors</title> </head> <body> <div style="background-color: rgba(0,0,0,0.5);">在Firefox的浏览器里能看到alpha值为0.5的黑色背景</div> </body> </html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索颜色
, 参数
, 透明
, rgba
, 通道
数值
,以便于您获取更多的相关知识。

时间: 2024-08-04 01:24:23

CSS3 RGBA colors使用说明的相关文章

CSS3 HSLA colors使用说明

前面我们讲一了篇关于<CSS3 HSL colors 使用说明>的文章,这里我们再说说css中别一个颜色相关的属性:CSS3 HSLA colors 其语法为: <length> <percentage> <percentage> <opacity>各个属性跟我们前说的HSL相同,有别之处是加了一个:opacity,其意思为: alpha(透明度). 取值在0到1之间:HSLA是在HSL的基础上增加一个透明度(A)的设置. 当然,HSLA 就是H

CSS3 HSL colors 使用说明

HSL是一个选择颜色的很直观的方法.如果你需要"再暗一点点儿" 或 "再亮一点点儿",使用十六进制组合会颇麻烦吧.幸运的是,通过HSL,它就是仅仅一个简单的数字改变. HSL色彩模式是工业界的一种颜色标准,是通过对色调(H).饱和度(S).亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一. 语法:<length&g

CSS3 RGBA等于RGB加上opacity吗?

在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑:CSS3 RGBA等于RGB加上opacity吗? 请别先回答,我们接下来分析分析. 以前我们经常会碰到这样一个问题,设置了一个div的opacity(透明度)以后,这个div层里的内容也跟着透明了,特别是文字,一透明就离我们想要的效果差很远了,显示这不是我们需要的.以前我遇风这种情况通常是把透明

css3 Background-size属性使用说明

昨天做了一个ipad版的用户协议,顶部和底部各有一个小banner,ipad有横版和竖版,两版宽度不一样,所以两个banner的宽度也不一样. 为了减少使用image,我用到了Background-size来自适应div的宽度. background-size的类型 background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默

熟悉css/css3颜色属性

原文:熟悉css/css3颜色属性 颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & HSLA 颜色名 十六进制色 个人最喜欢的一种颜色表达方式. 十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介于 0 与 FF 之间. 生成随机颜色: function getRandom

webkit-CSS3 RGBA 透明的div会使其下方不透明的div也透明

问题描述 CSS3 RGBA 透明的div会使其下方不透明的div也透明 我是一个前端工程师,我们现在遇到了非常棘手的问题,关于CSS3 RGBA 标签 问题: 我使用的是**谷歌浏览器**当在一个播放的视频流上覆盖一层不透明的DIV或图片(此处为黑色最好),再在DIV或图片上覆盖以RGBA值来写的DIV,则下方不透明的层也会变得透明,从而映射出底层所播放的视频流.但如果换做Opacity,则不存在该问题. 你们需要一个明亮的视频流才可观看到此现象,请不要忽视. 举例:将一个RGBA值的DIV<

CSS中相对/绝对之relative/absolute介绍

absolute属性配合left/top/right/bottom属性具有极强的定位性.这种功能特性是如此的明显与强烈,可能会让页面重构人员很单纯的被这一特性"捕获",而产生迷失. 一板一眼的描述可能难以理解,举个通俗点的例子吧: 一个脸蛋不错身材超好的姑娘穿上超PP的衣服后是如此的光艳动人,对于我们这类常年困居于深宅大院的光棍男来讲,这种美艳是如此的迷人,以至于我们的精力多集中在这沉鱼落雁的美貌上,而忽略了其他一些东西,例如知性,善良,贤惠等.很容易的,我们以后一想到此女子,第一反应

CSS定义网站页面背景透明几个例子

感谢 @林小志 的博客,让我知晓 IE过渡滤镜 + CSS3 rgba 即可完美实现. 具体实现代码如下:  代码如下 复制代码 .transparent {     background:rgba(0, 0, 0, 0.3);     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); } :root .tra

【翻译】VisualStudio11中的CSS编辑器改进(asp.net 4.5系列)-ScottGu

这是我所发的关于ASP .NET 4.5系列博文的第七篇文章. 下一个版本的.NET和Visual Studio包括大量的新特性和新功能 在开发ASP.NET 4.5 WebForms和Mvc的时候 你会看到很多功能上的改进 (不管是基于核心ASP.NET还是一些其他的扩展) 在本篇文章中将会涵盖 下一个版本的VisualStudio关于支持在ASP.NET中使用CSS3的一些改进 CSS Color Picker 在VisualStudio的早起版本中, CSS编辑器的智能提示引擎包括了一个颜