主页 > 教程合集 > Html/css >

利用CSS隐藏页面元素五种方法

时间:2018-06-25 阅读:0

用CSS隐藏页面元素有许多种方法。我们可以将opacity设为0、将visibility设为hidden、将display设 none或者将position 设为absolute然后将位置设到不可见区域。

利用CSS隐藏页面元素五种方法

以下就是余斗教大家的五种方法来实现隐藏页面元素:

一、Opacity

opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这意味着将opacity设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。


.hide {opacity: 0;}
 

如果你打算使用opacity属性在读屏软件中隐藏元素,很不幸,你并不能如愿。元素和它所有的内容会被读屏软件阅读,就像网页上的其他元素那样。换句话说,元素的行为就和它们不透明时一致。

我还要提醒一句,opacity属性可以用来实现一些效果很棒的动画。任何opacity属性值小于 1 的元素也会创建一个新的堆叠上下文(stacking context)。

二、Visibility

第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏。

这个属性也能够实现动画效果,只要它的初始和结束状态不一样。这确保了visibility状态切换之间的过渡动画可以是时间平滑的(事实上可以用这一点来用hidden实现元素的延迟显示和隐藏——译者注)。


.hide {visibility: hidden;}
 

三、Display

display 属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。

不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它,就像操作其他的元素。


.hide {display: none;}
 

四、Position

假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况opacity和visibility影响布局, display不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下面是采用这种办法的CSS:


.hide {position: absolute;top: -9999px;left: -9999px;}
 

五、Clip-path

隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过clip属性来实现,但是这个属性被废弃了,换成一个更好的属性叫做clip-path。Nitish Kumar最近在 SitePoint 发表了“介绍clicp-path属性”这篇文章,通过阅读它可以了解这个属性的更多高级用法。

记住,clip-path属性还没有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的 SVG 文件,浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下:


.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}
 

虽然我们的元素自身不再显示,它也依然占据本该占据的矩形大小,它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。在我们的例子里,剪裁区大小为零,这意味着用户将不能与隐藏的元素直接交互。此外,这个属性能够使用各种过渡动画来实现不同的效果。

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2018-06-25最后更新,转载注明出处。

相关推荐

返回顶部