【CSS-TASK6】

RGBA和OPACITY,DISPLAY和VISIBLITY区别

一 背景介绍

1.大家在写页面时，会用到各种元素，比如div, img等等。有时候一张页面会放好几张图片，图片如果显示效果都一样，看起来很单调，

整个页面给人的感觉会很硬。那么，怎么能让页面的元素有一种多样化，甚至有一种朦胧美呢？于是，有了opacity和rgba()这两个属性。 其中，opacity属性是css3新提的属性。

2.另外，在看一下display和visibility背景介绍，故名思意，display和visibility是与元素显示有关系的，这两个属性都可以控制元素的 显示与隐藏。

究其作用，我们可以知道，为了提高用户的体验，实现更好的页面甚至元素与用户的互动，当用户开始某个操作时，可以通过display和visibility 这两个属性让元素显示或者隐藏, 或者以哪种方式显示。

3.综上所述；其实某个元素产生的背景和原因，就是为了满足日益增长的用户体验要求。

二 知识剖析

 DISPLAY的属性值

block:独占一行，可以设置宽高。

inline:表现为一个行级元素（一般情况下不独占一行）

inline-block：不独占一行，但是可以设置宽高。同时具有inline和block的特性。

none:元素不可见，并且不为其保留相应的位置。

VISIBILITY的属性值

hidden 元素不可见，但仍然为其保留相应的空间

visible 元素可见，默认值

collapse 只对table对象起作用，能移除行或列但不会影响表格的布局。

visibility:inherit 继承上级元素的visibility值

dispaly和visibility二者的区别：

display:none 元素不可见，在文档流中不占据空间，visibility：hidden 元素不可见，但是占据空间。还有需要注意的一点是，从visibility：hidden转换为visibility：visible时比display：none转换为display：block性能要好， 因为display在切换可见性时，文档流会重新书写,所以visibility：visible性能更好。

RGBA

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。

RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0）， 那该元素就是完全

透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。

例子：rgba(55,146,179,.5) ; //rgb值为“55,146,179”，.5使设定的rgb值为50%透明,1为完全不透明，0为完全透明

OPACITY

opacity属性是CSS3的属性，设置元素的不透明级别

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

注意：IE8以及更早版本支持替代的filter属性。例如：filter: Alpha（opacity=50）;

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

 .opacity {background : red ; opacity: 0.5;}

OPACITY和RGBA()的用法以及二者的区别：

然后，RGBA和opacity都是用来设置元素的不透明度的，那么两者有什么区别呢？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

所以，rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。比如background-color,text-shadow, box-shadow。

三 常见问题

透明度的兼容性？

四 解决方案

旧版本的ie浏览器提供了filter这一属性，下面是兼容性写法

.transparent_class {

 filter:alpha(opacity=50);

-moz-opacity:0.5;

 -khtml-opacity: 0.5;

opacity: 0.5; }

五 编码实战

可见性demo

https://github.com/ptteng/PPT/blob/master/demo/css-06-RGBA%20and%20opacity/display-demo.html

透明度demo

https://github.com/ptteng/PPT/blob/master/demo/css-06-RGBA%20and%20opacity/rgba-demo.html

六.拓展思考

可见性和透明度在页面编写时可以应用在哪些方面

七.更多讨论

visibility有哪些比较巧妙的用法？