就是当鼠标指向图片的时候,图片会蒙上一层半透明的黑色遮罩,遮罩上有文字,不用伪类也可以,在html中加个div什么的样式和:after一样就行了,代码如下:
<!DOCTYPE html> <html> <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> .imgbox{ width:200px; height: 140px; position:relative; overflow: hidden; } img{ width:100%; } .imgbox:after{ position:absolute; left: 0; top:0; display: block; width:100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); content: attr(data-text); transition:all 1s ease; transform: translateY(-100%); color: #FFF; } .imgbox:hover:after{ transform: translateY(0); } </style> </head> <body> <div data-text="我是文字"> <img src="./2.jpg" alt=""> </div> </body> </html>
上一篇: 《建站管家》二次开发文档