透過Panel容器將標籤放在圖片上的指定位置 (容器相對位置)
下圖是將"札幌"2個字放在指定的位置
CSS設置
可以在CCS設定相對位置也可在Label style設定
<style type="text/css">
#Label1 {position: absolute; left: 280px; top: 500px;}
</style>
Body內容
放置一個Panel容器 要設置容器寬度
<asp:Panel ID="Panel1" runat="server" Width="920px" position="relative">
放置一個Label標籤 標籤名稱為CSS 設置的ID名稱
<asp:Label ID="Label1" runat="server" Text="札幌" position="absolute"></asp:Label>
放置一個Image控制項 作為底圖
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/hokkaido02.png"/>
</asp:Panel>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="web_image_label.aspx.cs" Inherits="testWeb.web_image_label" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#Label1 {position: absolute; left: 280px; top: 500px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Panel ID="Panel1" runat="server" Width="920px" position="relative">
<asp:Label ID="Label1" runat="server" Text="札幌" position="absolute"></asp:Label>
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/hokkaido02.png" />
</asp:Panel>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style2"></td>
<td class="auto-style6">
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
留言列表
