css实现在图片上显示文字

此文章是基于　　搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台

一. 相关文件介绍

　　1. wordOnImg.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>css实现图片上显示文字</title>
    <%@ include file="/common/basePath.jsp"%>
    <link href="content/css/demo/wordOnImg.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <a class="play-img" >
    <img src="content/images/demo/film.jpg" >
    <em>1280超清</em>
  </a>
 </body>
</html>

View Code

　　2. wordOnImg.css

.play-img {
    WIDTH: 86px; HEIGHT: 122px; DISPLAY: block; POSITION: relative; 
    PADDING-BOTTOM: 2px; PADDING-TOP: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; 
}
.play-img IMG {
    WIDTH: 86px; HEIGHT: 122px;  
}
.play-img EM {
    Z-INDEX: 2; POSITION: absolute;
    WIDTH: 76px; HEIGHT: 20px; LEFT: 2px; BOTTOM: 2px;     
    PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; 
    FONT-SIZE: 12px; FONT-STYLE: normal; COLOR: #fff; TEXT-ALIGN: right; LINE-HEIGHT: 20px; 
}

View Code

二. 效果图：http://localhost:8080/ims/view/iot/wordOnImg.jsp