文章目錄

• 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

總結

以上是生活随笔為你收集整理的css之半透明遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。