CSS3 RGBA 属性高级用法
2016-07-27 17:55
375 查看
讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过 hack支持。RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下:
在现实中,使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确,下面是几个颜色的RGB数值,大家在使用的时候只需要把00~FF的 16进制数值换算成十进制就行了。
RGBA的强大之处在于,通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色,就像颜料的混合一样。举一个例子,我们先为页面设置一个背景 图片,接着为页面里的H1里的内容设置一个颜色,例如:
效果如下:
这里可以看到H1并没有透明效果
但如果我没对H1设置一个整体的透明度(opacity属性)的话,效果会变成怎样呢?
在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的,我们用RGBA属性单独设置H1的背景色试试。
这是我们可以看到H1的背景成50%透明的白色,但里面的文字还是不透明的黑色。当然,你也可以只让H1里的文字透明。
只让文字透明,可以用来创建剪纸效果。
在任何需要设置颜色的地方都可以使用RGBA,例如:
为所有div设置透明度为30%线宽为10px的白色实线边界。
鼠标滑过改变透明度。
另外如果和JavaScript配合的话,RGBA属性可以创造出更加炫目的效果。
改变你的CSS编写习惯
在以上的例子中你可以看到作者一直在使用rgb()去指定颜色,而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性 准备的写法,用rgb()指定颜色可以理解为rgba()不透明,但两者的差别非常小,这会对将来升级到rgba()带来很大的方便。
兼容所有浏览器
虽然目前主流浏览器的最新版本都已经支持RGBA属性,但我们还必须照顾使用旧版浏览器的用户,因此在某些地方我们用老方法会保险一些。方法也有好 几种,大家按需选择。
虽然这会影响在低版本浏览器里的效果,但这是最简单的方法,也是最保险的方法,具体操作如下:
先设置rgb颜色在设置rgba颜色,这样不支持rgba属性的浏览器只会显示rgb颜色,而支持rgba的浏览器因为重定义的作用会显示rgba 颜色。
PNG格式的优点在于图片里的透明特性可以在网页里呈现出来,这里就用到了这个特点。
通过透明度为50%的PNG背景达到了和rgba一样的效果。
对IE6和IE7可以用IE的私用属性来解决,可达到部分和rgba一样的效果。
我们需要留意的是StartColorStr和EndColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。
/* 基本语法 */ em { color: Rgba(red,green,blue,opacity) } /* 举例 */ em { color: rgba(255,0,0,1) } /* 红色,不透明 */ em { color: rgba(100%,0%,0%,1) } /* 同上 */ |
如何使用RGBA属性
RGBA的强大之处在于,通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色,就像颜料的混合一样。举一个例子,我们先为页面设置一个背景 图片,接着为页面里的H1里的内容设置一个颜色,例如:h1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); } |
这里可以看到H1并没有透明效果
但如果我没对H1设置一个整体的透明度(opacity属性)的话,效果会变成怎样呢?
h1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; } |
在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的,我们用RGBA属性单独设置H1的背景色试试。
h1 { color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); } |
这是我们可以看到H1的背景成50%透明的白色,但里面的文字还是不透明的黑色。当然,你也可以只让H1里的文字透明。
h1 { color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); } |
只让文字透明,可以用来创建剪纸效果。
更多用法
在任何需要设置颜色的地方都可以使用RGBA,例如:div { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); } |
为所有div设置透明度为30%线宽为10px的白色实线边界。
div { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); } div:hover{ color: rgba(255, 255, 255, 1); background-color: rgba(142, 213, 87, 0.6); } |
鼠标滑过改变透明度。
另外如果和JavaScript配合的话,RGBA属性可以创造出更加炫目的效果。
改变你的CSS编写习惯
在以上的例子中你可以看到作者一直在使用rgb()去指定颜色,而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性 准备的写法,用rgb()指定颜色可以理解为rgba()不透明,但两者的差别非常小,这会对将来升级到rgba()带来很大的方便。
兼容所有浏览器
虽然目前主流浏览器的最新版本都已经支持RGBA属性,但我们还必须照顾使用旧版浏览器的用户,因此在某些地方我们用老方法会保险一些。方法也有好 几种,大家按需选择。
1.低版本不使用RGBA属性
虽然这会影响在低版本浏览器里的效果,但这是最简单的方法,也是最保险的方法,具体操作如下:h1 { color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); } |
2.使用透明的PNG图片做背景
PNG格式的优点在于图片里的透明特性可以在网页里呈现出来,这里就用到了这个特点。h1 { background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; } |
3.IE hack
对IE6和IE7可以用IE的私用属性来解决,可达到部分和rgba一样的效果。h1 { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000',EndColorStr='#80000000'); } |
相关文章推荐
- CSS秘密:垂直居中
- CSS 的优先级机制
- 使用css属性line-height实现文字垂直居中的问题
- 样式化复选框(Styling checkbox) & 扩展实现“开关按钮效果”
- 安卓设置Activity进入和退出动画及样式
- 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
- CSS3技巧:利用css3径向渐变做一张优惠券
- CSS语法
- css系列(6)css的运用(二)
- DIV+CSS与表格建站的差别
- CSS图片垂直居中方法
- CSS Sprites
- CSS3 flex布局的妙用
- hover事件2,鼠标移入一个标签使其子级标签的css样式发生改变,显示可见
- hover事件1,鼠标移入改变css样式
- Qt 样式表 setStyleSheet
- css3制作扇形菜单
- css padding属性
- Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件
- css position属性