有的时候，我们都希望自己能隐身。HTML元素其实也是这样。有的时候，它们也想藏起来一段时间。并不是完全被删除——而是暂时隐身一会儿。

还好，CSS为我们提供了多种方式，让HTML元素消失一段时间。

实现隐身的CSS

我们现在选一个HTML元素，把它的类指定为“ghost（幽灵）”，然后让它隐身。

 //index.html

<div class=”ghost”>

  <p>I’m friendly!</p>

</div>

//style.css

.ghost {

}

死亡像素

默认情况下，HTML元素都是可见的。它们默认的CSS可见性（visibility）属性是可见的，但是你可以做点改变：

 .ghost {

  visibility: hidden;

}

现在这个幽灵就彻底隐身了，但是它依然会占据页面上的位置。

消失无踪

如果你想让某个元素彻底消失，连页面上的空间都不出现，你可以使用CSS的display属性。

一般情况下，开发者会有display属性来定义一个HTML元素是要以block元素的形式出现，还是以inline元素的形式出现。但是其实，它还可以用来彻底隐藏元素：

 .ghost {

  display: none;

}

与可见性，这种方式操作之后，元素不会占据页面上的空间。

透明度

你还可以使用CSS的opacity（透明度）属性让元素彻底透明：

 .ghost {

  opacity: 0.0;

}

与visibility: hidden一样，opacity: 0.0这种做法尽管会让元素小时，但是它依然会占据空间，在页面上留下一块空白。请记住，使用上述方法的时候，元素依然是DOM的一部分——只不过普通用户无法在浏览器中看到他们。

跑远点，再远点，再远点……

隐藏元素的一个终极打法，就是将它移动到离页面非常非常远的地方，你必须要疯狂缩放页面才能看到它。

要想做到这一点，首先你需要使用CSS的position（定位）属性，给元素在页面上指定一个绝对位置。

然后，你要用一个非常大的数字，来将元素移动到页面的可视范围之外：

 .ghost {

  position: absolute;

  left: -999999px;

}

这么做有什么实际意义？有的时候，它能够提升内容的无障碍性。例如屏幕阅读器——盲人用户使用这个东西来收听浏览器中的内容——可以拾取这个内容，而其他用户则无法看到。

要想获得最好的结果，你应该将这些元素移动到页面的左侧，而不要移动到顶端或是最下面，否则会混淆屏幕阅读器。

原文来自:sdk

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com