<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery手写弹出层背景半透明，内容不透明</title> <script src="jquery.min.js"></script> </head> <body> <style> *{ margin:0; padding:0;} .alertDiv{ position:fixed; width:100%; height:100%; top:0; color:#fff;} .alertCon{ position:absolute; width:100%; height:100%; text-align:center; margin-top:20%; z-index:999;} .alertBg{ position:absolute; width:100%; height:100%; background:#000; opacity:0.7; z-index:99;} </style> <div class="alertDiv"> <div class="alertCon"> <img src="QQ截图20170306172127.png" /> </div> <div class="alertBg"></div> </div> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> <p>Body内容</p> </body> </html>