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 ...
随机推荐
- redis五中数据类型
MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加 ...
- Postgresql Useful SQL/Commands
Update records ' and a.subscriber_id=b.subscriber_id; Connections select count(*) from pg_stat_activ ...
- go 变量的定义方式
var a int a = 1 var a,b int a =1 b = 2 var a,b = 1,2 var s string = "hello world" a, b := ...
- WebForm FindControl的使用方法
Control.FindControl (String):在当前的命名容器中搜索带指定 id参数的服务器控件. 有点类似javascript中的getElementById(string); 简单的例 ...
- Oracle 与 postgreSQL 事务处理区别(多版本与undo区别)
2015年左右,因为工作需要用MongoDB.CouchBase这两种文档型数据库,时不时到这两个数据库官网上查资料.报BUG.时常可以在MongoDB官网上看到这样一些新闻,“某某企业成功将MySQ ...
- python踩坑记录篇,持续更新
问题1:python语法错误 错误日志如下: print(a[2]) ^IndentationError: unexpected indent [解决方案]:缩进代码错误导致,将print的缩进 ...
- vue-cli3.0的记录
页面打包的话,需要在根目录创建一个js文件 vue.confing.js 打包app的话,在dist里面只拿自己需要的静态文件
- python学习:模块(第一节)
1.什么是模块? 如果你从 Python 解释器退出再进入,那么你定义的所有的方法和变量就都消失了.为此 Python 提供了一个办法,把这些定义存放在文件中,为一些脚本或者交互式的解释器实例使用,这 ...
- zabbix (二)安装
一.centos7源码安装zabbix3.x 1.安装前环境搭建 下载最新的yum源 #wget -P /etc/yum.repos.d http://mirrors.aliyun.com/repo/ ...
- 为什么ROC曲线不受样本不均衡问题的影响
转自:https://blog.csdn.net/songyunli1111/article/details/82285266 在对分类模型的评价标准中,除了常用的错误率,精确率,召回率和F1度量外, ...