標題: 用div+css取代table的边框代码
rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3961
發表於 2013-7-1 10:59 
14.199.250.118
分享  私人訊息  頂部

原背景图尺寸较小:


用div可以把背景图扩大而不会重复:

用 div 取代 table 可以在背景图片上加字时不用背景代码 backqround,而改用插图代码 img,因此可以不受原图尺寸的限制而把背景图框放大缩小到合适的大小。


代码:
<center>
<DIV style="OVERFLOW: hidden; WIDTH: 边框宽度px; POSITION: relative; TOP: 20px; HEIGHT: 边框高度px">
<IMG style="BORDER: 边框颜色 边框厚度px 边框形状" src="背景图片网址" width=放大后的背景图片宽度>
<DIV style="LEFT: 左侧距离px; OVERFLOW: hidden; WIDTH: 可视文字宽度px; POSITION: absolute; TOP: 上侧距离px; HEIGHT: 可视文字高度px" align=left>
<span style="FONT: normal 字体大小px/行距% 字型; COLOR: 文字颜色">文字开始……。</span>
</DIV></DIV></center>
< BR><BR>

说明:
◆ 以上代码中的红色字是可更改的参数。
◆ 边框宽度=放大后的背景图宽度+两侧边框厚度。
◆ 边框高度=放大后的背景图高度+两侧边框厚度。
◆ 可选的边框形状有:点状(dotted)、虚线(dashed)、双细线(double)、脊状(ridge)等。
◆ 边框定位、文字定位、文字宽度和高度必须根据背景图片自行调试到合适位置。



[ 本帖最後由 rainbow 於 2016-4-28 16:37 編輯 ]