记忆点： 子绝父相
<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < meta http-equiv= "X-UA-Compatible" content= "ie=edge" > < title >Document </ title > < style > .contain{ display: block; width: 500px; height: 300px; margin: 100px; border: 1px solid #000; position: relative; }
.mask{ width: 500px; height: 300px; position: absolute; left: 0; top: 0; background: rgba( 0, 0, 0, .4) url( sun.png) no-repeat center; display: none; }
a:hover .mask{ display: block; } < / style > </ head > < body > < a class= "contain" > < img src= "fa.jpg" alt= "" style= "width: 100%; height: 100%;" > < div class= "mask" ></ div > </ a > </ body > </ html >