您现在的位置是：网站首页> 编程资料编程资料

CSS3中各种颜色属性的使用教程CSS实现大小相同、颜色深浅不一的粒子旋转加载动画CSS3中currentColor关键字的妙用使用CSS3的::selection改变选中文本颜色的方法css实现兼容火狐、IE的LI奇偶行颜色交替方法CSS中对RGB颜色的使用详解CSS3中颜色线性渐变实战使用CSS3的背景渐变Text Gradient 创建文字颜色渐变可自定义进度条颜色的CSS3动画进度条源码采用CSS3实现的表面颜色可渐变3D立方体动画特效源码纯CSS3实现简易3D按钮可配置背景颜色

2023-10-22 207人已围观

简介 CSS3中在rgb颜色的基础上又有了透明度的设置功能成为rgba属性,除此之外下面还会讲到CSS3新增的hsl及hsla颜色的用法,下面就来看一下CSS3中各种颜色属性的使用教程

rgba 颜色
原本 CSS 中的颜色除了可用 16 进位来表示 RGB 颜色值之外，还可以使用预先定义好的颜色名称。而 RGBA 是以 RGB 为基础再加上不透明度的属性。

CSS Code复制内容到剪贴板
  1. rgba(red, green, blue, opacity)  

其中的 red、green 及 blue 等颜色值是用 10 进位或是百分比(%)的方式来表示，允许的值为 0 到 255 之间的整数值；而 opacity 不透明度允许的值为 0 到 1 之间带有小数的数值。

快速的看一下实际的范例：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <div class="rgba1">rgba(0, 0, 0, 1)div>  
  3.  <div class="rgba2">rgba(100%, 100%, 0%, 0.75)div>  
  4.  <div class="rgba3">rgba(144, 180, 60, 1)div>  
  5.  <div class="rgba4">rgba(204, 102, 102)div>  
  6.  <div class="rgba5">rgba(300, -102, 0, 1)div>  
  7.     
  8.  <div id="log">div>  
  9. body>  

接着换 CSS：

CSS Code复制内容到剪贴板
  1. div {   
  2.  width: 220px;   
  3.  height: 50px;   
  4.  float: left;   
  5.  margin-right: 10px;   
  6.  line-height: 50px;   
  7.  text-align: center;   
  8.  border: 1px solid #000;   
  9. }  

基本用法：

CSS Code复制内容到剪贴板
  1. .rgba1 {   
  2.  /* 等同于 #ffffff 或是 rgba(100%, 100%, 100%, 1) */  
  3.  color: rgba(255, 255, 255, 1);   
  4.  /* 等同于 #000000 或是 rgba(0%, 0%, 0%, 1) */  
  5.  background-color: rgba(0, 0, 0, 1);   
  6. }   
  7.     
  8. .rgba3 {   
  9.  background-color: rgba(144, 180, 60, 1);   
  10. }  

2016517115126207.png (500×70)

除了给实际的颜色值之外，也可以用百分比(%)来表示：

CSS Code复制内容到剪贴板
  1. .rgba2 {   
  2.  background-color: rgba(100%, 100%, 0%, 0.75);   
  3. }  

2016517115159144.png (255×70)

若是 opacity 值没给的话，预设会用 0；这样表示是透明(transparent)喔：

CSS Code复制内容到剪贴板
  1. .rgba4 {   
  2.  /* 没有指定 opacity 值时, 预设使用 0 */  
  3.  background-color: rgba(204, 102, 102);   
  4. }  

2016517115223803.png (255×70)

如果颜色值超出限定的范围时，则会用最接近的数值：

CSS Code复制内容到剪贴板
  1. .rgba5 {   
  2.  /* 超出范围, 所以变成最接近的 rgba(255, 0, 0, 1) */  
  3.  background-color: rgba(300, -102, 0, 1);   
  4. }  

2016517115250487.png (255×70)

只要是颜色值的部份都能使用 rgab() 来设定。但当要用程序来存取时，可能要注意一下各浏览器间的差异喔：

JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.  var str = '';   
  3.  $('div:not(#log)').each(function(){   
  4.   var $this = $(this);   
  5.   str += '.' + $this.attr('class') + 提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：移动端Web页面的CSS3 flex布局快速上手指南10分钟理解CSS3 FlexBox弹性布局CSS3 Flex 弹性布局实例代码详解详解CSS3伸缩布局盒模型Flex布局浅谈CSS3中display属性的Flex布局的方法实例讲解CSS3中的box-flex弹性盒属性布局深入浅析CSS3中的Flex布局整理

    下一篇：CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网