background-color: rgba(0, 0, 0, .5);中的0.5表示这个矩形遮罩的透明度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS实现图片下半部分遮罩文字效果</title> <style> .class_outer { display: block; width: 550px; height: 260px; margin: 10px auto; position: relative; overflow: hidden; } .class_cover { width: 100%; height: 50px; line-height: 50px; padding-left: 5px; background-color: rgba(0, 0, 0, .5); color: #FFFFFF; font-size: 26px; position: absolute; left: 0px; bottom: 0px; } </style> </head> <body> <a href="#" class="class_outer"> <img src="img/01.jpg" width="550px" height="276px" border="0" /> <span class="class_cover">我是文本来描述内容的。</span> </a> </body> </html>