英文原文：How to make HTML disappear completely

因为数值的溢出，PacMan的“鬼”在第256关消失，最终over掉。

我们都会有想隐藏起来的时候，就连HTML元素也不例外。 有些时候他们想隐藏一下，也不是永远不再出现，只是藏一会儿。

谢天谢地，当HTML想隐藏起来的时候，CSS为其提供了多重选项。

不可见的CSS

我们先整出来一个类为"ghost"的HTML元素，并将它隐藏。

//index.html
<div class=”ghost”>
  <p>我不作恶!</p></div>
//style.css
.ghost {
}

死亡像素

默认情况下，HTML元素都是可见的，CSS的默认visibility（可见属性）是visible（可见），你可以调整脚本，并运行：

.ghost {
  visibility: hidden;
}

现在“鬼”被隐藏了起来，但它仍然占用了页面上的空间。

无痕

如果你想让某个东西隐藏，而且也不占用任何空间，这时你还可以使用CSS的显示（display）属性。

开发人员通常使用显示（display）属性来决定一个HTML元素应该显示为一个块元素亦或内联元素，但它也可以将元素完全隐藏：

.ghost {
  display: none;
  
  
}

和visibility: hidden不同，使用display: none隐藏元素不会占用页面上的任何空间。

透明化

走，走，继续。

你也可以使用CSS的透明度（opacity）属性让一个元素完全透明，也就是不可见了。

.ghost {
  opacity: 0.0;
}

就像visibility: hidden一样，opacity: 0.0将会留出HTML元素的空间。记住，对于所有的这些技术，元素都属于DOM?的一部分—只是普通用户在自己的浏览器中看不到而已。

其它翻译版本 (1) 加载中

跑！跑远，远远的！

隐藏元素的最后一种方法是将它移动到页面之外，要看到它，就需要最大限度地缩小页面。

要做到这一点，首先使用CSS的位置（position）属性给页面上的元素一个绝对（absolute）位置（和relative属性相对于其它HTML元素相对应）。

然后，您可以将该元素从页面上移动远离到一个任意大的像素位置：

.ghost {  
  position: absolute;  
  left: -999999px;
}

为什么要这样做呢？嗯，这对于内容的可访问性很有好处。屏幕阅读器—?从视觉上影响了人们浏览互联网—?你可以阅读这个内容，但其他人根本不知道内容在那里。

为了获得最佳效果，将这些不可见的元素放置在左边，而不是顶部或底部，这样可以让屏幕阅读器搞混。

作为万圣节的幽灵

如果你能将所有这4种技术结合在一起，那么你将得到一个非常漂亮的简单的万圣节服装：

这是我在奥斯丁的设计师Wes Searan的帮助下做出的。

你可以在本周末挑选一件—适合男性和女性的尺寸。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务