CSS透明度之rgba和opacity的区别

在CSS样式中，设置透明度的方式有两种。其一，opacity；其二rgba()。
opacity和rgba()在一定程度上是没什么区别。

一、怎么使用rgba和opacity

1、opacity

取值在0到1之间，0表示完全透明，1表示完全不透明。

.aa{opacity: 0.5;}

2、rgba

rgba语法:

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

.aa{background: rgba(255,0,0,0.5);}

二、rgba和opacity的区别

rgba()和opacity都能实现透明效果，主要区别有以下2点：

1、opacity作用于元素，以及元素内的所有内容的透明度，设置的透明度会被子级元素继承；rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
2、rgba 可以设置background-color , color , border-color , text-shadow , box-shadow

比如，我们写透明的黑色部分都是用opcity（0.3），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。

CSS透明度之rgba和opacity的区别相关推荐

html设置颜色透明度(rgba和opacity的区别)
rgba只对你想要设置的元素起作用,不会对其他元素产生影响. opacity具有继承性,如果你把它设置在父元素内,那么父元素包括其子元素都会产生透明,如果只对子元素设置透明度,,那么子元素包含的所有内 ...
css 透明度_如何在网页控制透明度
文字描边透明度在网页是一个很重要的属性,非常多的特效都需要控制透明度来完成. 01 语法通过修改元素透明度 opacity:数值; opacity属性取值范围为0.0~1.0,0.0表示完全透明, ...
[css] rgba()和opacity这两个的透明效果有什么区别呢？
[css] rgba()和opacity这两个的透明效果有什么区别呢? 1.opacity 是属性,rgba()是函数,计算之后是个属性值: 2.opacity 作用于元素和元素的内容,内容会继承元素 ...
CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)
目录前言 rgba() 函数详解再分享一个小技巧哈哈哈前言今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
css hsla和rgba的区别
在CSS3里可以使用RGBA和HSLA两种色彩模式,都可以用来在设置颜色的同时也可以设置它的透明度.RGBA指的是"红色.绿色.蓝色和Alpha透明度"(Red-Green-Blu ...
rgba、opacity、transparent透明效果有什么区别？
rgba().opacity.transparent都能实现透明效果. opacity 用来设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明),属性的所有后代元素都会继承 opac ...
RGBA 与 opacity不得不说的故事
css中RGBA和opacity有着不同的使用情景和使用方法,但是有时候也有着相同的效果和功效, 相同:都可以改变透明度, 不同点:在MDN上opacity是这样介绍的: 当opacity属性的值应用 ...
浏览器下的CSS透明度
浏览器下的CSS透明度元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...

CSS透明度之rgba和opacity的区别

一、怎么使用rgba和opacity

二、rgba和opacity的区别

CSS透明度之rgba和opacity的区别相关推荐

最新文章

热门文章