css之半透明遮罩

最新推荐文章于 2025-06-30 18:22:38 发布

原创最新推荐文章于 2025-06-30 18:22:38 发布 · 7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #overlayer #LayerMask

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种半透明背景实现方案：一种是通过页面层加高亮透明圆的方式；另一种是在页面层上叠加遮罩层（包括半透明背景、透明块及半透明背景），并提供了具体的HTML与CSS代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 背景
2. 效果图
3. 实现方式
- 3.1 页面层 + 高亮透明圆
- 3.2 页面层 + 遮罩层(半透明背景 + 透明块 + 半透明背景)

1. 背景

在我们做新手引导时，经常需要使用半透明背景来提示软件的使用方法，本来将描述如何实现这种半透明的效果。

2. 效果图

这里写图片描述

3. 实现方式

3.1 页面层 + 高亮透明圆

在这里插入图片描述

<div id="app">
  <img src="small-bird.jpg" title="image" />
  <p>半透明聚光灯效果</p>
  <div class="layer">
    <div class="circle"></div>
  </div>
</div>

#app {
  color: red;

  & > img {
    width: 100px;
    height: 100px;
    vertical-align: top;
    margin: 12px 20px 12px 30px;
  }

  .layer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    & > .circle {
      margin-left: 10px;
      width: 120px;
      height: 120px;
      border-radius: 120px;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    }
  }
}

在线 DEMO(请确保网络正常)：jsfiddle

3.2 页面层 + 遮罩层(半透明背景 + 透明块 + 半透明背景)

在这里插入图片描述

<div id="app">
  <img src="small-bird.jpg" title="image" />
  <p>半透明聚光灯效果</p>
  <div class="layer">
    <div class="content">
      <div class="circle"></div>
      <div class="right-side"></div>
    </div>
    <div class="footer"></div>
  </div>
</div>

#app {
  color: red;

  & > img {
    width: 100px;
    height: 100px;
    vertical-align: top;
    margin: 12px 20px;
  }

  .layer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    & > .content {
      display: flex;

      & > .circle {
        width: 130px;
        height: 120px;
      }

      & > .right-side {
        flex: 1;
        background-color: rgba(0, 0, 0, 0.6);
      }
    }

    & > .footer {
      flex: 1;
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
}

在线 DEMO(请确保网络正常)：jsfiddle