微信中推送的信息中有一种图文搭配的方式,即一张图片的下半部分有段阴影遮罩层,这个遮罩层上还有文字。
将微信的截图效果如下:
下面就用一段简单的代码实现此效果
代码如下:
<!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