019z-index：預設是0，最高無限~ 999和opacity:0.5 /背景透明度
阿新 • • 發佈：2021-08-14
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <link rel="stylesheet" href="./024.css"> </head> <body> <div id="content"> <ul> <li><img src="../../image/blank.jpg"alt=""></li> <li class="tipText">學習JAVA</li> <li class="tipBg"></li> <li>時間：future</li> <li>地點：火星</li> </ul> </div> </body> </html>
#content{ width: 380px; padding: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px #5f91d6 solid; } ul,li{ padding: 0; margin: 0; list-style: none; } #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top: 216px; } .tipText{ color: #c2ffdb; z-index: 0; } .tipBg{ background: #000000; opacity: 0.5;/*背景透明度*/ filter: Alpha(opacity=50); } img{ width: 300px; height: 300px; }