Question

我正在尝试在我的网页中设置叠加层，但我无法执行此操作。我在视图上设置叠加层的代码如下：

＆＃13;

#cover {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0.5;
}

＆＃13;

<div id="cover">
    <p>-----</p>
</div>

＆＃13;

但我没有得到理想的输出。

Answer 1

只需删除display: none，您就可以查看叠加层

<!DOCTYPE html>
<html lang="en">

<head>
  <style type="text/css">
    #cover {
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 1;
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <div id="cover">
    <p>-----</p>
  </div>
</body>

如何在视图上创建叠加层

1 个答案: