HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)

来源：互联网发布：js forech 编辑：程序博客网时间：2024/05/19 20:00

微信中推送的信息中有一种图文搭配的方式，即一张图片的下半部分有段阴影遮罩层，这个遮罩层上还有文字。

将微信的截图效果如下：

下面就用一段简单的代码实现此效果

代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)</title><style>.class_outer {display: block;width: 550px;height: 276px;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, .50);color: #FFFFFF;font-size: 26px;position: absolute;left: 0px;bottom: 0px;}</style></head><body><a href="#" class="class_outer"><img src="images/classical.jpg" width="550px" height="276px" border="0" /><span class="class_cover">大鱼海棠，不止关于爱情。</span></a></body></html>

其中background-color: rgba(0, 0, 0, .50);中的0.50表示这个矩形遮罩的透明度。

其它的就很简单了，就是相对定位搭配绝对定位。

实现的效果图如下：

Demo下载地址：http://download.csdn.net/detail/u014175572/9579309

0 0