HTML文字在圖片上顯示
阿新 • • 發佈：2019-02-03
第一種方式是image 作為背景圖片，即：background:url(".......");
例如如下程式碼塊：
第二種方式是將img塊與文字塊（文字塊採用span標籤顯示）放在同一個div 中，然後設定他們之間的位置，例如如下程式碼塊：
第三種方式是將img塊與文字塊（文字塊存放在div中）放在同一個div 中，然後設定他們之間的位置，例如如下程式碼塊：
<span style="font-family:Microsoft YaHei;"><div style="background:url('loading.gif') no-repeat;width:100px;height:50px">新增文字...新增文字...新增文字...</div></span> 第二種方式是將img塊與文字塊（文字塊採用span標籤顯示）放在同一個div 中，然後設定他們之間的位置，例如如下程式碼塊：
<span style="font-family:Microsoft YaHei;font-size:18px;"><div style="position: relative; width: 170px; height: 89px;"> <img src="loading.gif" width="170" height="89" alt=""> <span style="position: absolute; top: 0; left: 0;">新增文字...新增文字...新增文字...</span> </div> </span>
第三種方式是將img塊與文字塊（文字塊存放在div中）放在同一個div 中，然後設定他們之間的位置，例如如下程式碼塊：
<span style="font-family:Microsoft YaHei;font-size:18px;"><div style="position:relative;"> <img src="loading.gif" /> <div style="position:absolute; z-index:2; left:10px; top:10px">新增文字...新增文字...新增文字...</div> </div></span>
例項：
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <html lang="en"> <head> <title>領導首頁</title> <jsp:include page="/jsp/part/common-includecss-top.jsp"></jsp:include> <link href="${baseURL}/css/client/leaderHome/leaderHome.css" rel="stylesheet" /> </head> <body style="background-color:#333;"> <div class="content"> <div class="sysName"> <font class="sysFont">網路安全動態資料庫</font> </div> <div class="worldCountry1"> <a href="${baseURL}/client/Worldcountry.action"> <div class="worldCountry"> <font class="worldCountry-title"><strong>世界各國</strong></font> <p class="worldCountry-desc">掌握國內外網路安全動態</p> </div> <img src="${baseURL}/images/client/index/dq.png" class="worldCountry-img" /> <img src="${baseURL}/images/client/index/bghome.png" class="worldCountry-bkgd"/> </a> </div> <div class="fieldTrack1"> <a href="${baseURL}/client/FieldTrack.action"> <div class="fieldTrack" > <font class="fieldTrack-title"><strong>專題跟蹤</strong></font> <p class="fieldTrack-desc">跟蹤分析網路安全熱點事件</p> </div> <img src="${baseURL}/images/client/index/ly.png" class="fieldTrack-img" /> <img src="${baseURL}/images/client/index/bghome.png" class="fieldTrack-bkgd" /> </a> </div> <div class="background-flash"> <embed src="${baseURL}/images/client/index/leaderBG.swf" width="100%" height="674" wmode="transparent"> </div> </div> <!-- jquery --> <script src="${baseURL}/js/jquery.min.js"></script> <!-- Bootstrap core JavaScript --> <script src="${baseURL}/js/bootstrap.min.js"></script> <script src="${baseURL}/js/public.debug.js"></script> <script src="${baseURL}/js/plugins.js"></script> <script src="${baseURL}/js/tab.js"></script> <script src="${baseURL}/js/modal.js"></script> <script src="${baseURL}/js/client/message/js-messagemarkread-support.js"></script> <script src="${baseURL}/js/scrolltopcontrol.js"></script> <script src="${baseURL}/js/client/js-quick-tool.js"></script> <script src="${baseURL}/js/client/index/index.js"></script> <script src="${baseURL}/js/client/js-reportItem-support.js"></script> </body> </html>