21. CSS visibility（元素可见性）、 z-index：元素堆叠、透明度（opacity）

LXLong
460 阅读5分钟

1.CSS visibility（设置元素是否可见）

CSS 中的 visibility 属性用来设置元素是否可见，可以将该属性与 JavaScript 一起使用，来创建非常复杂的菜单或网页布局，比如在网页中做一些测试题时您可以使用 visibility 属性将题目的答案或解析隐藏起来，需要时再将其展示出来。

visibility 属性的可选值如下：

值描述
visible默认值，表示元素是可见的
hidden隐藏元素
collapse主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”
inherit从父元素继承 visibility 属性的值

提示：visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话，请使用 display 属性。

【示例】使用 visibility 属性来隐藏页面中的指定元素：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .visible {
        visibility: visible;
      }

      .hidden {
        visibility: hidden;
      }
      .collapse {
        visibility: collapse;
      }
      table {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h1 class="visible">visible</h1>
    <h1 class="hidden">hidden</h1>
    <table border="1">
      <tr>
        <th>值</th>
        <th>描述</th>
      </tr>
      <tr>
        <td>visible</td>
        <td class="collapse">默认值，表示元素是可见的</td>
      </tr>
      <tr>
        <td>hidden</td>
        <td>隐藏元素</td>
      </tr>
      <tr class="collapse">
        <td>collapse</td>
        <td>
          主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”
        </td>
      </tr>
      <tr>
        <td>inherit</td>
        <td>从父元素继承 visibility 属性的值</td>
      </tr>
    </table>

    <p>
      <strong>提示：</strong>visibility
      属性虽然会隐藏元素，但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话，请使用
      display 属性。
    </p>
  </body>
</html>

运行结果如下图所示：

1.gif

图：visibility 属性演示

注意：对于隐藏的元素，虽然我们在页面中看不到了，但是源代码中仍然包含这些隐藏的内容，因此您尽量不要使用它来隐藏敏感信息，例如用户信息、密码等等。

2. z-index：10：元素堆叠

通常我们可能会认为 HTML 网页是个二维的平面，因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的，每个元素之间都有一定的间隙，不会重叠。然而，实际的网页其实是三维的，元素之间可能会发生堆叠（重叠），您可以通过 CSS 中的 z-index 属性来设置元素的堆叠顺序，如下图所示：

元素堆叠演示

图：元素堆叠演示

每个元素都有一个默认的 z-index 属性，将 z-index 属性与 position 属性相结合可以创建出类似 PhotoShop 中的图层效果。z-index 属性可以设置元素的层叠级别（当元素出现重叠时，该元素在其它元素之上还是之下），拥有更高层叠级别的元素会处于层叠级别较低的元素的前面（或者说上面）。

通过 z-index 属性您可以创建更加复杂的网页布局，z-index 属性的可选值如下表所示：

值描述
auto默认值，堆叠顺序与父元素相等
number使用具体数值（整数）设置元素的堆叠顺序
inherit从父元素继承 z-index 属性的值

关于元素的层级关系有以下几点需要注意：

  • 对于未设置 position 属性的元素或者 position 属性的值为 static 时，后定义的元素会覆盖前面的元素；
  • 对于设置有 position 属性且属性值不为 static 的元素，这些元素会覆盖没有设置 position 属性或者 position 属性值为 static 的元素；
  • 对于 position 属性值不为 static 且定义了 z-index 属性的元素，z-index 属性值大的元素会覆盖 z-index 属性值小的元素，即 z-index 属性值越大优先级越高，若 z-index 属性值相同，则后定义的元素会覆盖前面定义的元素；
  • z-index 属性仅在元素定义了 position 属性且属性值不为 static 时才有效。

【示例】下面通过具体代码来演示 z-index 属性的使用：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box-x {
        width: 150px;
        height: 350px;
        border: 1px dashed red;
        background-color: rgba(255, 153, 153, 0.7);
        float: left;
      }
      .box-y {
        width: 300px;
        height: 120px;
        border: 1px dashed green;
        background-color: rgba(179, 255, 153, 0.7);
      }
      .one {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 4;
      }
      .two {
        position: relative;
        top: 30px;
        left: 80px;
        z-index: 3;
      }
      .three {
        position: relative;
        top: -10px;
        left: 120px;
        z-index: 2;
      }
      .four {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
      }
      .five {
        margin-left: 100px;
        margin-top: -50px;
        background-color: rgba(255, 255, 153, 0.7);
        z-index: 5;
      }
    </style>
  </head>
  <body>
    <div class="box-x one">z-index: 4;</div>
    <div class="box-y two">z-index: 3;</div>
    <div class="box-y three">z-index: 2;</div>
    <div class="box-x four">z-index: 1;</div>
    <div class="box-y five">z-index: 5;但没定位</div>
  </body>
</html>

运行结果如下图所示：

image.png

图：z-index 属性演示

1.gif

3. CSS透明度（opacity）

可以通过 rgba()、hsla() 可以设置颜色的透明度，但是它们只能在定义颜色的同时设置透明度，无法对图像或者其它元素设置透明度。

CSS 中提供了一个 opacity 属性用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。其语法格式如下：

opacity: number;

其中 number 为一个 0~1 之间的浮点数（小数），用来表示元素的透明度，值越小则越透明（0 表示完全透明，1 表示完全不透明）。

另外，在使用 opacity 属性时，还需要注意以下几点：

  • 当一个元素定义了 opacity 属性，并且其值小于 1 时，那么它的子元素也会拥有同样的透明度；
  • 当一个元素定义了 opacity 属性，并且其值小于 1 时，将会重新定义该元素默认的 z-index 属性，如果其它的元素为非定位元素，那么该元素的堆叠级别将会高于其它元素；
  • 如果定义的 opacity 属性值超过了指定的范围，那么则截取与之最相近的值，例如 1.5 将截取为 1。

【示例】使用 opacity 属性设置元素的透明度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 150px;
      }
      img:last-child {
        opacity: 0.4;
        margin-left: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./css.png" alt="" />
      <img src="./css.png" alt="" />
    </div>
  </body>
</html>

运行结果如下图所示：

image.png

图：opacity 属性演示

IE8 或者更早版本的 IE 浏览器不支持 opacity 属性，若想要在这些浏览器中实现透明效果可以使用 filter 属性，语法格式如下：

filter: opacity(25%);

【示例】使用 filter 属性设置元素的透明度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 150px;
      }
      img.img_two {
        filter: opacity(0.5);
        margin-left: 30px;
      }
    </style>
  </head>
  <body>
    <img src="./css.png" class="img_one" />
    <img src="./css.png" class="img_two" />
  </body>
</html>

运行结果如下图所示：

image.png

图：filter: alpha(opacity=x) 属性演示

为了让所有浏览器都可以实现透明效果，您可以同时定义 opacity 和 filter 两个属性，如下所示：

p {
    opacity: 0.5;
    filter: opacity(0.5);
}
avatar
文章
阅读
粉丝