css3如何控制元素隐藏

这篇文章将为大家详细讲解有关css3如何控制元素隐藏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 控制方式：1、使用“display:none”语句将元素移除出可访问性树，进而实现元素隐藏；2、使用“visibility: hidden”语句设置元素不可见；3、使用“opacity: 0”语句设置元素透明；4、让元素脱离屏幕显示位置等。本教程操作环境：windows7系统、免费云主机、域名CSS3&&HTML5版、Dell G3电脑。display : nonedisplay属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。代码：
按钮

按钮
visibility: hidden将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。代码：
按钮

按钮
opacity: 0opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。代码：
按钮

按钮
transparent将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。代码：
按钮

按钮
rgba(0,0,0,0)从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。代码：
按钮

按钮
rgba只需要第四个参数为0即可达到隐藏元素的效果。hsla(0,0%,0%,0)hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。代码：
按钮

按钮
hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。代码：
按钮

按钮

相关推荐: 怎么设置css按钮宽度

这篇文章将为大家详细讲解有关怎么设置css按钮宽度，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　按钮宽度 　　默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来…