HTML里background-image中,可以設置background-repeat實現平鋪,前面博文中關於css樣式換行的(相關博文:超文本css樣式換行),其中有個三個div組合的,中間的div是平鋪的,但是沒有設置repeat值,默認就平鋪了,默認就是橫向縱向都是平鋪的,不需要特別設置。
background-repeat通過設置為其他值,可以只橫向平鋪,或縱向平鋪,或不平鋪:
no-repeat:不平鋪,背景圖只顯示一次
repeat-x:沿着x軸橫向平鋪
repeat-y:沿着y軸縱向平鋪
repeat:橫向縱向平鋪,鋪滿(默認)
LODOP中有類似的,可以給純文本,圖片等在紙張中進行平鋪:
相關博文:LODOP中平鋪圖片 文本項Repeat
由於lodop不會輸出css背景圖,因此這種背景圖方式的不能被lodop打印出來,可以通過普通圖片的輸出方式。
測試代碼:
<div style="float:left;" > <div style="background-image:url(images/top1.jpg);height:10px;width:100px;"></div> <div style="background-image:url(images/mid.jpg);width:100px;word-break:break-all;">盡量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下載地址</div> <div style="background-image:url(images/bot.jpg);height:10px;width:100px;"></div> </div> <div style="float:left;" > <div style="background-image:url(images/top1.jpg);height:10px;width:100px;"></div> <div style="background-image:url(images/mid.jpg);width:100px;word-break:break-all;">LODOP<br>C-LODOP</div> <div style="background-image:url(images/bot.jpg);height:10px;width:100px;"></div> </div> <div style="background-image:url(images/r1.png);width:100px;float:left;">LODOP<br>C-LODOP<br>LODOP<br>C-LODOP<br>LODOP<br>C-LODOP</div> <div style="background-image:url(images/r2.png);background-repeat:repeat-x;width:100px;float:left;">LODOP<br>C-LODOP<br>LODOP<br>C-LODOP</div> <div style="background-image:url(images/r2.png);background-repeat:repeat-y;width:100px;float:left;">LODOP<br>C-LODOP<br>LODOP<br>C-LODOP<br>LODOP<br>C-LODOP</div> <div style="background-image:url(images/r2.png);background-repeat:no-repeat;width:100px;float:left;">LODOP<br>C-LODOP<br>LODOP<br>C-LODOP</div>
圖示: