【译转】一个指南的CSS RGBA颜色

时间:2014-11-24 13:06:03 浏览:805次

    利用CSS建站中了,为了让页面的颜色更加丰富,页面上凸显层次感,我们会采用RGBA CSS。它是一种颜色值,也允许我们设置颜色和不透明度/透明度。使用RGBA CSS建立出来的网站会更具有立体和真感。因此,今天笔者小丹为大家带来的CSS建站知识就是关于RGBA CSS。

    下面有一个例子使用CSS rgba()符号来指定白色与50%的不透明度。

    p {color: rgba(255, 255, 255, 0.5);}

    RGBA的延伸RGB颜色模型,首字母缩写代表红色绿色蓝色阿尔法。的alpha值代表的透明度/不透明的颜色。

    RGBA语法

    RGBA颜色符号的格式是:rgba(red, green, blue, alpha)

    前三个值红色的,绿色,蓝色的,可以是0到255之间的整数或百分比在0%至100%之间。这些值描述的红、绿、蓝在所需的颜色。

    下面我们举例来说,如果你想要的纯红色背景色然后你想要100%的红、绿色的0%,和0%的蓝色,可以设置如下:background-color: rgba(255, 0, 0, 1);

    结果:

   

    又或者使用百分比值:background-color: rgba(100%, 0%, 0%, 1);

    结果:

   

    第四价值阿尔法,指定颜色的透明度水平/不透明可以一个值在0.0和1.0之间。这里还要说一句如果你想知道,CSS4编辑CSS颜色模块的草案,有一个规范允许使用RGBAα值的百分比,但此时浏览器不支持该选项。

    这里是如何指定黄色,不透明度为50%:color: rgba(255, 242, 0, 0.5);

    结果:

   

    将整数转换为百分比

    正如之前提到的,使用百分比值而不是整数值代表的红色、绿色和蓝色的结果完全相同的事情。0是0%,255年是100%。等效比例,简单整数除以255然后乘以100%。

    将前面的例子,如果RGBA颜色值 rgba(255, 242, 0, 0.5)然后:

    Red: (255/255) x 100% = 100%
    Green: (242/255) x 100% = 94.9%
    Blue: (0/255) x 100% = 0%
    Alpha: 0.5 (can’t be a percentage unit under CSS3 specifications)
    color: rgba(100%, 94.9%, 0%, 0.5);

    结果:

   

    将比例转换为整数

    如果你需要比例转换为整型值,值的百分比乘以255,然后除以100%。比方说我们的颜色是橙色,可以描述如下:rgba(100%, 64.7%, 0%, 1)

    结果:
   

    Red: (100% x 255) / 100% = 255
    Green: (64.7% x 255) / 100% = 165 (rounded to the closest integer)
    Blue: (0% x 255) / 100% = 0
    Alpha: 1

    上面的橙色颜色从百分比值转换为整数值时:rgba(255, 165, 0, 1)

    结果:
   

    RGB颜色模型的解释

    RGB颜色模型是一个简单的方法来描述颜色使用的红、绿、蓝的颜色。这就像水彩颜料、油画颜料混合得到我们想要的实际颜色。

    试想一下,如果你想产生一个纯粹的蓝色。要做到这一点,你就不会想要红色和绿色混合颜色。所以我们把红色和绿色0%,蓝色为100%:rgb(0%, 0%, 100%)

    结果:
   

    但是如果不是蓝色的你想要的樱红色我们可以创建紫红色混合100%,100%的蓝色红了:rgb(100%, 0%, 100%)

    结果:

   

    从基本的色彩理论,我们知道没有任何颜色黑色。所以让黑我们设置红、绿、蓝为0%:rgb(0%, 0%, 0%)

    结果:
   
    确定RGB颜色

    我不是数学天才,我几乎理解色彩理论所以我使用工具来确定RGB颜色值。我使用Photoshop的颜色选择器功能的红色、绿色和蓝色的一个特定的值,但有免费的在线工具如颜色滑块和RGB颜色计算器能帮助的任务。

   

    使用Photoshop RGB值的颜色选择器对话框

    退路RGBA颜色

    尽管RGBA颜色值符号支持流行的现代浏览器,它不是一个坏主意来指定固体(完全不透明的/不透明的)回退颜色以防,特别是很容易做到。

    假设我们有一个div有深蓝色的背景颜色在50%不透明度和文本的白人30%的不透明度。

    对于我们的坚实的后备颜色, rgba()不支持的浏览器,我们可以使用十六进制的颜色符号或其他任何CSS颜色值符号。在下面的示例中,使用十六进制的颜色符号。

    div {
         background-color: #000080; /* Fallback: navy blue in hexadecimal notation */
         color: #ffffff; /* Fallback: white in hexadecimal notation */
         background-color: rgba(0, 0, 128, 0.5); /* navy blue with 50% opacity */
         color: rgba(255, 255, 255, 0.3); /* white with 30% opacity */
        }

    结果:
   

    这是我们后退的外观颜色如果RGBA并不在浏览器中可用:

   

    浏览器支持

    所有主要浏览器都支持RGBA颜色符号。用的角度来看CSS rgba()符号已经存在自2011年启动Internet Explorer 9(3年前)。

    (转载请注明转自:www.wangzhan.net.cn,谢谢!珍惜别人的劳动成果,就是在尊重自己!)

上一篇:时效型标题优化方式

下一篇:如何降低域名被恶意泛解析的风险

返回列表

网站建设知识

品牌创意网站建设 上市公司网站建设 大型门户类网站建设 全方位网站运营代理
企业官方网站建设 B2C电子商务网站建设 专题活动网站(MINISITE)

更多 +联系我们

24小时服务热线:400-1180-360

业务 QQ:  444961110传真: 0311-80979256

渠道合作:  444961110@qq.com

更多 +关于我们

河北供求互联信息技术有限公司(河北供求网)诞生于2003年4月,是康灵集团旗下子公司,也是河北省首批从事网站建设、电子商务开发,并获得国家工业和信息化部资质认证的企业。公司自成立以来,以传播互联网文化为已任, 以高科技为起点,以网络营销研究与应用为核心,致力于为各企事业单位提供网络域名注册、虚拟主机租用、网站制作与维护、网站推广和宣传、网站改版与翻译、移动互联网营销平台开发与运营、企业邮局、网络支付、系统集成、软件开发、电子商务解决方案等优质的信息技术服务,与中国科学院计算机网络信息中心、腾讯、百度、阿里巴巴、搜狗、360、电信、联通、中国数据、万网、中资源、阳光互联、点点客、北龙中网、电信通等达成战略合作伙伴关系。

版权所有 © 河北供求互联信息技术有限公司-优秀的石家庄网站建设公司,为您提供石家庄网站建设、网站推广等优质服务.   
服务热线:400-1180-360 传真:0311-80979256 增值电信业务经营许可证:冀B2-20105159 冀ICP备09010972号

在线留言
免费试用
扫一扫

扫一扫
赠送神秘大礼

全国免费服务热线
400-1180-360

返回顶部