`
zhangyaochun
  • 浏览: 2620465 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3之RGBA colors

    博客分类:
  • css3
阅读更多

CSS3之 RGBA colors

 

 ----RED GREEN BLUE APPHA

 


 

1、语法:   

 

  • R ----red(红色) 正整数(0~255) 或 百分比
  • G ----green(绿色) 正整数(0~255) 或 百分比
  • B ----blue(蓝色) 正整数(0~255) 或 百分比
  • A ----appha(透明度) 0~1
 
2、兼容性
 


 
 
 
3、代码
 
.test{
   background-color:rgba(0,0,60,0.4);
}
 
  • 大小: 20.1 KB
  • 大小: 31.7 KB
分享到:
评论

相关推荐

    CSS3风水罗盘旋转特效无水印版

    CSS3的opacity属性可以调整元素的不透明度,而RGBA颜色则允许我们在设置颜色的同时控制透明度,达到渐变和混合的效果。 7. **Responsive Design(响应式设计)**:考虑到罗盘可能在不同尺寸的设备上展示,使用媒体...

    css3.0参考手册 CHM

    CSS3 Properties 属性列表 Borders border-color border-image border-radius box-shadow Backgrounds background-origin background-clip background-size multiple backgrounds Color HSL colors HSLA colors ...

    postcss-hexrgba:PostCSS插件,将速记十六进制方法添加到rgba()值

    PostCSS HexRGBA 插件,将速记十六进制方法添加到rgba()值。 输入. foo { color : rgba ( # 0fab53 , 0.8 )}. bar { background : linear-gradient ( rgba ( # fff , .1 ) , rgba ( # fff , .2 ));} 输出. foo { ...

    纯CSS3彩色Loading加载特效.zip

    6. **颜色和透明度(Colors and Opacity)**:使用颜色关键字、十六进制、RGB、RGBA等表示法设置元素颜色,以及使用`opacity`和`rgba()`控制元素的透明度,可以创建丰富多彩的动画效果。 7. **动画性能优化**:通过...

    CSS3按钮鼠标悬停弹性特效.zip

    6. **颜色和渐变(Colors and Gradients)**:CSS3支持多种颜色表示方法,如RGB、RGBA、HSL、HSLA等,以及线性渐变(Linear Gradient)和径向渐变(Radial Gradient)。这些可以用于创建丰富多彩的按钮背景,提升...

    《css揭秘》实例代码

    CSS3引入了`filter`属性,其中`blur()`函数可以创建模糊效果。毛玻璃效果通常结合`opacity`和`backdrop-filter`来实现,使背景呈现出柔和、朦胧的质感。这种效果常用于创造高对比度的界面元素,提升用户体验。 2. ...

    纯CSS3实现发光按钮开关切换特效.zip

    5. **颜色和渐变(Colors and Gradients)**:CSS3支持多种颜色表示方法,如RGBa、HSLa等,以及线性渐变和径向渐变,这些都可以用来创建发光和色彩过渡的效果。 6. **Flexbox布局**:虽然未明确提及,但这个特效...

    庆祝 70周年CSS3特效.zip

    CSS3支持线性渐变、径向渐变以及多种颜色模式,如RGBA、HSLA,让颜色运用更为丰富和灵活。在红色喜庆的主题下,这些特性可以帮助设计者创造出富有节日氛围的颜色搭配。 6. **伪类和伪元素(Pseudo-classes and ...

    纯css3绘制害羞的兔斯基表情动画特效源码.zip

    5. **CSS3的颜色和渐变(Colors and Gradients)**:使用rgba()、hsl()或渐变(linear-gradient、radial-gradient)来创建丰富的颜色效果,使兔斯基的表情更具表现力。 6. **动画性能优化**:通过限制动画的渲染...

    CSS3仿携程旅行网404页面代码.zip

    9. **颜色和透明度(Colors & Opacity)**:CSS3支持RGBA和HSLA颜色模式,以及`opacity`属性,使得混合颜色和调整元素透明度变得简单。 10. **盒模型(Box Model)**:CSS3盒模型允许开发者自定义元素的边界、内...

    纯CSS3实现的彩色唇膏打开动画特效源码.zip

    CSS3支持多种颜色表示方式,包括RGB、RGBA、HSL、HSLA以及颜色关键词等。此外,还可以使用线性渐变(linear-gradient)和径向渐变(radial-gradient)创建复杂的颜色效果。唇膏的彩色部分很可能就使用了这些技术来...

    纯CSS3实现的卡通效果城市空间动画场景特效源码.zip

    9. **颜色与渐变(Gradients & Colors)**: CSS3支持线性渐变、径向渐变以及更丰富的颜色模式,如HSL和RGBA。 10. **Flexbox(Flexible Box布局)**和**Grid布局**:这两者提供了更灵活的盒模型布局方式,适用于...

    html5+css3知识点和面试题.pdf

    1. **CSS3前缀**:在早期,不同的浏览器厂商对CSS3特性支持不同,因此需要添加特定的前缀如`-webkit-`, `-moz-`, `-ms-`, `-o-`来确保跨浏览器兼容性。例如,`-webkit-border-radius`用于Chrome和Safari,`-moz-...

    CSS3.0参考文档

    - **RGBA colors**:红色、绿色、蓝色加上透明度的颜色模型。 - **opacity**:控制元素的不透明度。 ##### 4. 文本效果 (Text effects) - **text-shadow**:为文本添加阴影。 - **text-overflow**:当文本溢出时...

    postcss-color-converter:PostCSS插件可在HEX,RGB,HSL和关键字颜色格式之间转换颜色

    安装$ npm install postcss-color-converter用法// dependenciesvar fs = require ( "fs" )var postcss = require ( "postcss" )var colorConverter = require ( "postcss-color-converter" )// css to be ...

    纯CSS3实现的鼠标响应式奶油冰棍动画效果源码.zip

    CSS3提供了丰富的颜色选择器,如颜色名称、十六进制、RGB、RGBA等,以及`opacity`属性来调整元素的透明度。在奶油冰棍动画中,颜色和透明度的改变可以增强视觉效果,比如奶油在滑落过程中可能会逐渐变淡。 7. 响应...

    纯CSS3实现的立体动画菜单效果源码 菜单项按下有内阴影.zip

    7. **颜色和透明度(Colors and Opacity)**:CSS3支持更丰富的颜色表示,如RGBA和HSLA,以及`opacity`属性,这使得在按下菜单项时改变背景色和内阴影颜色成为可能,同时控制透明度可以创建出微妙的视觉效果。...

    CSS网页设计实战CSS网页设计实战

    3. **定位机制**:CSS提供了静态、相对、绝对和固定定位,帮助元素在页面上精确放置。例如,`position: relative;`可以使元素相对于其正常位置偏移,而`position: absolute;`则将其从正常流中移出,相对于最近的非...

    css-(1).zip_css_css属性手册 web

    5. **颜色和背景(Colors and Backgrounds)**:CSS允许使用颜色值(如`#hex`, `rgb()`, `rgba()`, `hsl()`, `hsla()`)定义元素的颜色,同时可以设置背景颜色、背景图片、背景重复、背景位置和背景附件等。...

    Css中文手册

    **CSS(层叠样式表)**是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,是网页设计的核心技术之一。它允许我们将样式规则与文档内容分离,使得网页的呈现更加灵活,易于维护和扩展。 **CSS...

Global site tag (gtag.js) - Google Analytics