CSS3中rgba颜色用法及opacity细微区别

经常做前端开发的人都知道网页上的颜色可以用rgb(red,green,blue),和WEB色值如#3498db来表示。例如菠菜园经常用到的网页配色是以下几种:

常用网页配色方案

常用网页配色方案

但是在实际开发过程中有了单纯的颜色并不一定满足我们的开发需求,所以有时候也需要我们把某些颜色做透明处理,所以我们也经常这样写代码:

  1. .rslides_tabs .rslides_here a {
  2.     background#2f889a;
  3.     color#fff;
  4.     opacity:0.8;
  5.     border1px solid #2f889a;
  6. }

我们可以用opacity对整个元素进行半透明处理。当然也包含元素上面的文字。所以opacity属性可以很方便的适用在整个元素半透明处理的地方。

RGBA是什么?

关于RGBA的专业解释很多,菠菜园从第一篇文章开始就说了,咱们的文章全部采用白话的方式,如果需要专业解释大家可以百度一下。R代表RED,G代表GREEN,B代表BLUE,A代表Alipha颜色空间,我们不用去想颜色空间是什么,简单的理解成透明处理就行了。

有了RGBA处理颜色就灵活多了,比如我们写一个button标签,我们可以单纯的为button标签的背景色增加半透明效果,而不影响button上面文字的清晰度。示例代码如下:

  1. .btn-primary {
  2.     positionabsolute;
  3.     displayblock;
  4.     left: 0;
  5.     top: 0;
  6.     color#fff;
  7.     line-height28px;
  8.     padding: 0 15px;
  9.     max-widthnone;
  10.     border-radius: 2px 0 0 0;
  11.     z-index: 2;
  12.     filter: alpha(opacity=70);
  13.       background: rgba(47,136,154,0.5);
  14.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  15. }

 

  • 版权声明: 本文源自 菠菜园, 于8年前,由整理发表,共 946字。
  • 原文链接:点此查看原文
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!