您的位置：首页 > 移动开发 > 微信开发

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

2016-07-18 16:46 1211 查看

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

将微信的截图效果如下：

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

代码如下:

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航