請賜教: html 在 image 的標簽如何劃格線

https://www.pdawiki.com/forum/thread-40377-1-1.html

請賜教: html 在 image 的標簽如何劃格線 - 词库制作交流区 - Dictionary Compilation - 掌上百科 - PDAWIKI - Powered by Discuz!

懇請各位先進蒞臨指導,一個問題搞了一夜,搞不出來,html 在 image 的標簽, 若想把此 image 劃上格線左5格右5格等分的大小該如何處理,實在是找不到解決辦法

  1. 格線可貼附在 image 上…或許可用層的概念 z-index

  2. 目前碰到定位問題…且弄成 mdx 格線沒顯示…非常不解…

  3. 目前 格線的部份和 圖片竟是分離的…兩者並非一體…也就是放大縮小時格線會隨之放大縮小
    不知可有辦法可以完全貼附格線和圖片一起放大縮小

  4. img {position: absolute; left: 0px; top: 0px; z-index: -1;}…image 用 absolute 定位似乎也行不通…此會和之前的導航和翻頁有衝突…
    且如此定位…圖似乎如同 background image …也無法擺於導航和翻頁之間
    附圖如下…另一張為無導航和翻頁的 html 格線的顯示

  5. 令人更不解的是 為何 寬度可以用 百分比的比例但高度卻用不了百分比的比例 width: 50%; height: 500px;

    高度若用 百分比的比例… …width: 50%; height: 20%; …顯示根本是錯誤的
    Thanks a lot

<html>
<head>
<style>
table, td {
  border: 3px solid blue;
  border-collapse: collapse;
  color:red;
  width: 50%;
  height: 500px;
  z-index: 1;
  text-align: right;
  font-size: 3em;
  opacity:0.5;
}
img {position: absolute;
	 left: 0px;
   top: 0px;
   z-index: -1;
	}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>1</td>
    <td></td> 
  </tr>
  <tr>
    <td>2</td>
    <td></td>
    </tr>
    <tr>
    <td>3</td>
    <td></td>
    </tr>
      <tr>
    <td>4</td>
    <td></td>
    </tr>
      <tr>
    <td>5</td>
    <td></td>
    </tr>  
 </table>
<img src="C:\cpdic\css\OECD_25.png" width="100%"></img>
</body>
</html>

https://c-t.work/s/fbe2adefc2e146 或进入 cowtransfer.com 获取,在首页输入取件码:4wagja(24小时内有效)

\ 430x20



看不懂,建议画图说明

已貼…但 html 碼不知怎麼貼成文字…