此文章是基于 搭建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>
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; }
二. 效果图：http://localhost:8080/ims/view/iot/wordOnImg.jsp
