文章目录 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