zoukankan      html  css  js  c++  java
  • 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;100px;"></div>
    <div style="background-image:url(images/mid.jpg);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;100px;"></div>
    </div>
    
    <div style="float:left;" >
    <div style="background-image:url(images/top1.jpg);height:10px;100px;"></div>
    <div style="background-image:url(images/mid.jpg);100px;word-break:break-all;">LODOP<br>C-LODOP</div>
    <div style="background-image:url(images/bot.jpg);height:10px;100px;"></div>
    </div>
    
    <div style="background-image:url(images/r1.png);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;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;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;100px;float:left;">LODOP<br>C-LODOP<br>LODOP<br>C-LODOP</div>

    图示:

  • 相关阅读:
    SQL Server 2014忘记SA密码或禁用而且Windows身份验证也无法登录的解决办法
    深入解密.NET(Tuple元祖)
    DbContext 和 ObjectContext两者的区别
    开源的监控软件
    进程kswapd0与events/0消耗大量CPU的问题
    loadrunner---<二>---菜鸟对cookie的思考
    替换linux下的rm命令,并对-rf进行判断
    linux下恢复误删除的文件方法(ext2及ext3)
    oracle闪回使用以及删除存储过程恢复
    eclipse中新建maven项目-转
  • 原文地址:https://www.cnblogs.com/huaxie/p/11287264.html
Copyright © 2011-2022 走看看