opacity和background的rgba区别

简介: opacity和background的rgba区别

首先opacity是css属性,可以设置任何元素的透明度,包括元素内容、边框和背景

【它的取值是0到1,表示从完全透明到完全不透明的变化,使用opacity设置元素的透明度时候,元素和他的内容都会具有相同的透明度】

background的rgba是css中设置元素背景色的一种方式,也可以来设置背景图的透明度,他的透明度的范围是rgba(r,g,b,a),a表示透明度,取值范围是0到1

不同点是:background的rgba可以单独控制元素的背景颜色或图像的透明度,而不影响元素内容和边框的透明度,并且rgba还可以和box-shadow、text-shadow一起使用

rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元索内的所有内容的透明度

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果! )


相关文章
|
4月前
FlexibleSpaceBar 解析之background
FlexibleSpaceBar 解析之background
|
6月前
|
搜索推荐 UED
什么是计算机图形领域的 color saturation
什么是计算机图形领域的 color saturation
|
6月前
|
前端开发
前景色[color]
前景色[color]。
35 0
|
12月前
|
JavaScript
background-color设置为透明的方法
background-color设置为透明的方法
159 0
COLOR
COLOR
113 0
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
80 0
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1082 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
498 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?