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>

    图示:

  • 相关阅读:
    Leetcode Array 4 Median of Two Sorted Arrays
    vscode Python Pylint(代码检测插件)
    Leetcode Array 1 twoSum
    mysql 配置 安装和 root password 更改
    vscode 编译调试c/c++的环境配置
    chm文件打不开的解决办法
    A + B Problem II
    欢天喜地七仙女——代码规范与计划
    欢天喜地七仙女——项目系统设计与数据库设计
    欢天喜地七仙女——团队Gitee实战训练
  • 原文地址:https://www.cnblogs.com/huaxie/p/11287264.html
Copyright © 2011-2022 走看看