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>
图示:

html的css背景图的repeat的更多相关文章
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
- css背景图撑开盒子高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css背景图充满屏幕
代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...
随机推荐
- Apache查看连接数和限制当前的连接数
在wamp环境下查看apche连接数和限制当前的连接数 httpd_mpm.conf文件在你apache安装上当的\\conf\\extra中,还在就是在要apache httpd.conf中把#In ...
- P2P system: Napster
Napster structure client machines之所以叫peers是因为对于server来说这些machines是平等对待的 当你upload一首歌曲如PennyLane.mp3时, ...
- matlab(8) Regularized logistic regression : 不同的λ(0,1,10,100)值对regularization的影响,对应不同的decision boundary\ 预测新的值和计算模型的精度predict.m
不同的λ(0,1,10,100)值对regularization的影响\ 预测新的值和计算模型的精度 %% ============= Part 2: Regularization and Accur ...
- Jmeter+Selenium结合使用(完整篇)
selenium登录后的cookie交接给接口结合使用 一.下载webdriver插件(包含谷歌和火狐驱动),安装好之后需重启jmeter 二.在配置元件中添加jp@gc - Chrome Drive ...
- Java Executor框架使用
Java Executor框架是Jdk1.5之后推出的,是为了更加方便的开发多线程应用而封装的框架: 相比传统的Thread类,Java Executor使用方便,性能更好,更易于管理,而且支持线程池 ...
- 批量给文件去BOM(百度网盘)
链接:https://pan.baidu.com/s/1jC8RkyC0xX1lA-zZjOyDsw 提取码:geko 第一步:浏览你要移除BOM编码的文件夹.第二步:点击移除bom,随后会弹出提示框 ...
- Docker 学习10 Docker的系统资源限制及验证
一.资源限制 二.内存限制 1.OOME 每一个进程都会有oom_adj(oom计算分数的权重)值,此值越大,oom_score(oom得分)越高,越容易被干掉,因此非常非常重要的容器化应用,一开始就 ...
- 十.iSCSI网络磁盘
默认端口:3260 • Internet SCSI,网际SCSI接口 – 一种基于C/S架构的虚拟磁盘技术 – 服务器提供磁盘空间,客户机连接并当成本地磁盘使用 • backstore,后端存储 ...
- 模拟I2C协议学习点滴之复习三极管、场效应管
晶体三极管分为NPN和PNP型两种结构形式,除了电源极性的不同工作原理是大致相同的.对于NPN管,它是由2块N型半导体夹着一块P型半导体所组成的,发射区与基区之间形成的PN结称为发射结,而集电区与基区 ...
- [转]引用模板类中定义的类型(用typedef或using)以及auto、decltype、typename的使用
一.背景 使用typedef或者using定义类型别名是非常常见的手段,在c++里面,有时为了封装性,模块性等原因还会在某一个namespace或者class内部定义类型别名. 最近在写c++代码的时 ...