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

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

将微信的截图效果如下:

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

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

代码如下:




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

		

	

	

		
			
			大鱼海棠,不止关于爱情。
		

	


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

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

实现的效果图如下:

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

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


你可能感兴趣的:(CSS3,HTML,html,图片,遮罩,文字,部分)