文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

在吃豆豆游戏的第二百五十六级,由于一个整数溢出,导致PacMan的鬼魂消失在乱码画面里。

有时我们都想消失。HTML元素也是如此。有时他们想隐藏一段时间。不是完全不复存在——只是让其保持隐藏。

值得庆幸的是,当使HTML元素消失时,CSS提供了多个选项。

使元素不可见的CSS

让我们给一个HTML元素加上“ghost”的类并隐藏它。

//index.html
<div class=”ghost”>
  <p>I’m friendly!</p>
</div>
//style.css
.ghost {
}

 

第 1 段(可获 1.04 积分)

坏点

默认情况下,HTML元素是可见的。CSS的visibility 属性默认值是visible,但你可以将其属性反转像下面这样:

.ghost {
  visibility: hidden;
}

现在ghost是隐藏的,但它仍然会占用页面上的空间。

不留痕迹

如果你想让某个元素隐藏,同时不占用任何页面空间,你可以使用CSS的display属性。

开发人员通常使用display属性来决定是否应将一个HTML元素显示为一个块元素还是内联元素,但它也可以用来完全隐藏元素:

.ghost {
  display: none;
第 2 段(可获 1.18 积分)
}

不像visibility: hidden, 一个按照display: none隐藏的元素不会占用页面上的任何空间。

走,走,消失了 。

你也可以使用CSS的opacity属性让一个元素变得如此透明以至于看不见了。

.ghost {
  opacity: 0.0;
}

例如visibility: hidden, opacity: 0.0将会在HTML元素所在的位置留下一个空白的空间。记住,使用以上这些技巧,HTML元素任然是DOM的一部分 —只是在普通用户的浏览器中变得不可见而已。

快跑!跑的越远越好!

你可以隐藏元素的最后一个方式,是将它移开当前页面足够远,以至于你需要不断缩小页面才看够看到它。

第 3 段(可获 1.45 积分)

要做到这一点,首先你要用CSS的position属性将元素在页面中绝对定位(相对于其他HTML元素的相对定位)。

然后,你可以将该元素从页面中移出一个任意大的像素数:

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

你为什么要这样做?嗯,它对你页面内容的可访问性有利。那些视障人士用来浏览因特网的屏幕阅读器 — — 可以获取这个内容,而其他人却不知道这些内容。

为了获得最佳效果,请将这些看不见的元素放在左边,而不是顶部或底部,后者可以混淆屏幕阅读器。

第 4 段(可获 1.3 积分)

做一个万圣节的幽灵

当你把这4种技术结合在一起,你就得到了一个很酷的简易万圣节服装

这是我在奥斯丁设计师和露营者Wes Searan的帮助下完成的。

你可以在这个周末结束后挑选一件 — 有适合男人和女人不同大小的尺寸。

第 5 段(可获 0.66 积分)

文章评论