css實現在圖片上顯示文字

本文轉載自查看原文 2016-10-28 16:51 1637 Java

此文章是基於　　搭建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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css圖片顯示文字（上浮） CSS實現文字環繞圖片 css圖片上懸浮文字（絲帶效果）實現自動截取文字，css實現文字超出顯示省略匯總 css實現文字過長顯示省略號的方法用css實現文字超出指定寬度顯示省略號(...) css實現文字由背景圖片填充而來的 CSS設置文字方向，讓文字豎排顯示常見的CSS文字居中顯示 CSS實現文字陰影