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 ...
随机推荐
- sudo 以管理员身份运行脚本--tee方式记录脚本日志
说明:当运行脚本时,常遇到权限不足等,可以用以上方法来以管理员权限运行 1.编辑/etc/sudoers (注意,这里使用 visudo 而不是 vi 来设置.) 2.visudo或 给与/etc/s ...
- 阿里云轻量级服务器和NGINX部署Django项目
部署条件: 1.一台阿里云服务器(本人的是CentOS系统的服务器) 2.已经构建好的项目 3.服务器上安装并配置Nginx 首先第一步:在服务器上安装并配置Nginx 进入服务器 $ ssh roo ...
- HDU-2082-找单词(母函数)
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2082 题意: 假设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1, ...
- 01_Tutorial 1: Serialization 序列化
1.序列化 1.官方教程 https://q1mi.github.io/Django-REST-framework-documentation/tutorial/1-serialization_zh/ ...
- Oracle ORA-00600[2662] 解决
一.问题描述 1.数据库情况 1)数据库版本:11.2.0.4: 2)未开启归档: 3)没有备份:无RMAN备份.无DUMP备份: 4)数据库redo log 日志组,每组只有一个成员: 2.问题出现 ...
- Spring-RabbitMQ实现商品的同步(后台系统)
1.配置rabbitMQ 需要把以上配置文件加载到spring容器,在appliacationContext.xml中添加如下内容: 注意:无需配置监听,因为服务器端(生产者只需要将消息发送到交换机即 ...
- P2637 第一次,第二次,成交!
题目描述 因为奶牛们的节食运动(奶牛还节食?)给农夫JOHN余下了一大批干草无法处理,所以他准备要开一个拍卖会去出售他的干草.他有N(1<=N<=1000)批干草(每批大约100捆).他的 ...
- TCP数据的传输过程
建立连接后,两台主机就可以相互传输数据了.如下图所示: 上图给出了主机A分2次(分2个数据包)向主机B传递200字节的过程.首先,主机A通过1个数据包发送100个字节的数据,数据包的 Seq 号设置为 ...
- python 监视和控制鼠标键盘的输入(使用pynput 而非pyhook)
百度上搜到的文章大多基于pyhook, pip不能直接安装,托管在sourceForge上的代码仓库也找不到. google上发现可以使用pynput,貌似控制更为简单,而且可以直接使用pip安装 示 ...
- linux环境下固定ip操作
背景: 使用虚拟机管理软件VMvare workstation 安装好liunx虚拟机(centos)成功,下面为了固定linux的ip进行一系列设置 参考的文件有部分不是很详细,在借鉴它的基础上进行 ...