請賜教: html 在 image 的標簽如何劃格線
本帖最后由 喬治兄 于 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小时内有效）
https://www.pdawiki.com/forum/static/image/hrline/1.gif
<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>
https://www.pdawiki.com/forum/static/image/hrline/1.gif
https://i.loli.net/2020/05/07/DB6gouOxr5vbRM1.png https://i.loli.net/2020/05/07/QM6vhE7Bdkx4Gta.png https://i.loli.net/2020/05/07/nFehRVxKsylf9dZ.png
我不是这方面的专业，只不过用过下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> 另外，表格大小按比例设置比图片更小，在大格加上 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>
......
...... abc163 发表于 2020-5-8 12:57
我不是这方面的专业，只不过用过下CSS，所以下面答案可能有错，只作参考和提示，我把table以实际大小而不是 ...
abc163 兄:
哇....都沒試出來....
but, thanks anyway.
{:4_104:} 你测试的结果如何？如何没试出来？ 我用firefox，waterfox和IE浏览都可以的，图片的路径要加上file：///前缀，否则图片不显示，图片放到桌面上也无法显示，可能和我电脑权限有关 本帖最后由 喬治兄 于 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-10 00:58 编辑
abc163 发表于 2020-5-8 16:33
你测试的结果如何？如何没试出来？ 我用firefox，waterfox和IE浏览都可以的，图片的路径要加上file：///前 ...
abc163 兄:
圖出不來
改了一堆路徑都一樣
{:4_106:}
https://www.pdawiki.com/forum/static/image/hrline/1.gif
<html>
<head>
<style>
img {
background-image:url(file:///cpdic/css/OECD_25.png);
}
</style>
</head>
</html>
https://www.pdawiki.com/forum/static/image/hrline/1.gif
這個圖有出來....但是是background
<html>
<head>
<style>
body {
background-image:url("file:///C:/cpdic/css/OECD_25.png");
}
</style>
</head>
<body>
</body>
</body>
</html>
https://www.pdawiki.com/forum/static/image/hrline/1.gif
第一個有搞出來
https://i.loli.net/2020/05/09/ZnvS6fdH7LXjtbO.png
<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>
我没专门学习网页设计，只是使用一些开源软件时积累的一些网页设置经验，要得到正确答案确实要查看网页设计语言的规则。对于百分比宽和实际高度的规定，我猜测可能是浏览器读取数据时有规定，估计网页的宽度有个限度，这样使用百分比就有个相对参照，但高度估计没有预设的限定，经验上也常遇见很多一个网页有很长篇幅的，可以放整部长篇小说的。如果没有限定，使用一个百分比那就出问题了。
background-image是设定背景的，处于底层，网格线应覆盖在图片之上，你可以把另一图片放到一小格内就可以验证到了。我再试验你原来的设计，其实你图片放置也是可以的，只是问题出在表格设置参数没统一而已，可参考grids.html 文件。
附上两网页文件：grid.html 和 grids.html 。第一个文件使用background-image， 第二个稍改动原文件的表格设置。
链接：https://pan.baidu.com/s/1MIbERaux9GhblMayGyNAsg
提取码：qmm4 abc163 发表于 2020-5-9 23:36
我没专门学习网页设计，只是使用一些开源软件时积累的一些网页设置经验，要得到正确答案确实要查看网页设计 ...
Brother abc163 :
嗯嗯....感謝指引....或許...jpg, ...png 本身有此限制存在...或許 svg 可解
Thanks a lot 本帖最后由 喬治兄 于 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>
页:
[1]