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

喬治兄 · 发表于 2020-5-7 22:25:06

本帖最后由喬治兄于 2020-5-8 00:26 编辑

懇請各位先進蒞臨指導，一個問題搞了一夜，搞不出來，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

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

<html>
<head>
<style>
table, td {
  border: 1px solid blue;
  border-collapse: collapse;
  color:red;
  width: 50%;
  height: 500px;
  z-index: 1;
  text-align: right;
}
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>

abc163 · 发表于 2020-5-8 12:57:43

我不是这方面的专业，只不过用过下CSS，所以下面答案可能有错，只作参考和提示，我把table以实际大小而不是相对的百分比来设定，图片放到大table处作背景，这样图片就可随table格线一同放大缩小，不过这样画面会偏于一隅，但可用margin调整，不知是否合意。

===========================

<html>
<head>
<style>
table {
background-image:url("file:///D:/OECD_25.png");
margin: 500px
}
table, td {
border: 1px solid blue;
border-collapse: collapse;
color:red;
width: 1663px;
height: 494px;
text-align: right;
}
</style>
</head>
<body>
<table>
<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>
</body>
</html>

abc163 · 发表于 2020-5-8 13:11:10

另外，表格大小按比例设置比图片更小，在大格加上 background-size: 100% 100% 一行，画面缩小时就可以缩至比原图片更小。

===============

<html>
<head>
<style>
table {
background-image:url("file:///D:/OECD_25.png");
margin: 500px;
background-size: 100% 100%;
}
table, td {
border: 1px solid blue;
border-collapse: collapse;
color:red;
width: 832px;
height: 247px;
text-align: right;
}
</style>

......
......

喬治兄 · 发表于 2020-5-8 15:28:34

abc163 发表于 2020-5-8 12:57
我不是这方面的专业，只不过用过下CSS，所以下面答案可能有错，只作参考和提示，我把table以实际大小而不是 ...

abc163 兄:
哇....都沒試出來....
but, thanks anyway.

abc163 · 发表于 2020-5-8 16:33:10

你测试的结果如何？如何没试出来？我用firefox，waterfox和IE浏览都可以的，图片的路径要加上file：///前缀，否则图片不显示，图片放到桌面上也无法显示，可能和我电脑权限有关

喬治兄 · 发表于 2020-5-9 20:58:42

本帖最后由喬治兄于 2020-5-9 21:05 编辑

abc163 发表于 2020-5-8 16:33
你测试的结果如何？如何没试出来？我用firefox，waterfox和IE浏览都可以的，图片的路径要加上file：///前 ...

abc163 兄:
不好意思剛剛才看到仁兄的回帖

昨天試可能是我 url("file:///D:/OECD_25.png");少了一 / , 這兩天再來試試
試後結果再請益仁兄
只是非常不解
1. 百分比的比例但高度卻用不了百分比的比例 width: 50%; height: 500px;
高度若用百分比的比例.....width: 50%; height: 20%; ...... 顯示根本是錯誤的
2. 若用 background-image:url("file:///D:/OECD_25.png"); 格線不是會被蓋掉嗎
或是圖片會蓋掉格線
3. 仁兄可否把您所試的 html 上傳

Thanks a lot

喬治兄 · 发表于 2020-5-9 21:25:32

本帖最后由喬治兄于 2020-5-10 00:58 编辑

abc163 发表于 2020-5-8 16:33
你测试的结果如何？如何没试出来？我用firefox，waterfox和IE浏览都可以的，图片的路径要加上file：///前 ...

abc163 兄:
圖出不來
改了一堆路徑都一樣

<html>
<head>
<style>
img {
      background-image:url(file:///cpdic/css/OECD_25.png);
   }
</style>
</head>
</html>

這個圖有出來....但是是background
<html>
<head>
<style>
body {
background-image:url("file:///C:/cpdic/css/OECD_25.png");
   }
</style>
</head>
<body>
</body>
</body>
</html>

第一個有搞出來

<html>
<head>
<style>
table {
      background-image:url("file:///C:/cpdic/css/OECD_25.png");
      margin: max width;
   }

table, td {
      border: 1px solid blue;
      border-collapse: collapse;
      color:red;
      width: 1663px;
      height: 494px;;
      text-align: right;

}
</style>
</head>
<body>
<table>
  <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>

</body>
</html>

abc163 · 发表于 2020-5-9 23:36:13

我没专门学习网页设计，只是使用一些开源软件时积累的一些网页设置经验，要得到正确答案确实要查看网页设计语言的规则。对于百分比宽和实际高度的规定，我猜测可能是浏览器读取数据时有规定，估计网页的宽度有个限度，这样使用百分比就有个相对参照，但高度估计没有预设的限定，经验上也常遇见很多一个网页有很长篇幅的，可以放整部长篇小说的。如果没有限定，使用一个百分比那就出问题了。

background-image是设定背景的，处于底层，网格线应覆盖在图片之上，你可以把另一图片放到一小格内就可以验证到了。我再试验你原来的设计，其实你图片放置也是可以的，只是问题出在表格设置参数没统一而已，可参考grids.html 文件。

附上两网页文件：grid.html 和 grids.html 。第一个文件使用background-image，第二个稍改动原文件的表格设置。
链接：https://pan.baidu.com/s/1MIbERaux9GhblMayGyNAsg
提取码：qmm4

喬治兄 · 发表于 2020-5-10 01:03:04

abc163 发表于 2020-5-9 23:36
我没专门学习网页设计，只是使用一些开源软件时积累的一些网页设置经验，要得到正确答案确实要查看网页设计 ...

Brother abc163 :
嗯嗯....感謝指引....或許...jpg, ...png 本身有此限制存在...或許 svg 可解

Thanks a lot

喬治兄 · 发表于 2021-5-6 20:43:23

本帖最后由喬治兄于 2021-5-6 20:50 编辑

暫時筆記，有待進一步

https://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

table, td {
  border: 1px solid blue;
  border-collapse: collapse;
  color:red;
  width: 50%;
  height: 9.5vw;
  z-index: 1;
  text-align: right;
}
img {position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

</style>
</head>
<body>

<h2>Fade in a Box</h2>

<div class="container">
<table style="width:100%">
  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
<div class="text">John Doe</div>
  <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>
</div>
</body>
</html>


</div>

</body>
</html>

[求助] 請賜教: html 在 image 的標簽如何劃格線