<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { position: relative; width: 1226px; height: 600px; } .son { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background-color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="father"> <img src="./images/bg.jpg" alt=""> <div class="son"></div> </div> </body> </html>
这个效果就是使用的定位效果制作。
