div上新增遮罩層用於提示資訊
阿新 • • 發佈：2018-11-08
實現重點：背景div設定屬性position: relative;，遮罩層div設定屬性position: absolute;，背景屬性background，屬性bottom: 0;讓遮罩層div在背景div裡面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .bacimg{ width: 400px; height: 300px; position: relative; } .bacimg img{ width: 400px; height: 300px; } .cover{ width: 100%; position: absolute; background: rgba(0,0,0,0.6); color: #fff; opacity: 0.6; bottom: 0; } </style> </head> <body> <div class="bacimg"> <img src="../../img/ad2.jpg" /> <div class="cover"> aaaa </div> </div> </body> </html>
結果圖：
