After binding and locate hidden element of knowledge, complete imitation of potatoes hidden cover display case
Which points to note:
1. Zijuefuxiang
2. The newly acquired knowledge: background color and background images can be used simultaneously
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
<!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> .Tudou ;relative: position{ margin: 100px auto; width: 400px; height: 300px; } .mask { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } .tudou:hover .mask { display: block; } img { width: 100%; height: 100%; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="images/toudou.jpg" alt=""> </div> </body> </html>