html的css背景圖的repeat


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>

圖示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM