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 ...
随机推荐
- java中的strictfp的作用
自Java2以来,Java语言增加了一个关键字strictfp,虽然这个关键字在大多数场合比较少用,但是还是有必要了解一下. strictfp 的意思是FP-strict,也就是说精确浮点的意思.在J ...
- Mybatis获取自增主键值
1.配置文件变化 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLI ...
- Vue 获取页面后跳转其他页面
<template> <div> <img :src="detail.img" /> <h1>{{ detail.title }}& ...
- [NgRx] NgRx Runtime Checks
Turn on runtime check: @NgModule({ declarations: [AppComponent], imports: [ ..., StoreModule.forRoot ...
- NuGet本地包自定义路径
<?xml version="1.0" encoding="utf-8"?> <configuration> <packageSo ...
- sql server in和exists 的区别
如图,现在有两个数据集,左边表示#tempTable1,右边表示#tempTable2.现在有以下问题: 1.求两个集的交集? 2.求tempTable1中不属于集#tempTable2的集? 先 ...
- iwap:修改菜单树文件
1.添加mysql数据库连接的jar包. 2.
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- Windows 2012R2安装KB2919355失败
安装KB2919355时候失败,提示此更新不适用于此计算机. 需要首先安装KB2919442.
- Educational Codeforces Round 55 题解
题解 CF1082A [Vasya and Book] 史上最难A题,没有之一 从题意可以看出,翻到目标页只有三种办法 先从\(x\)到\(1\),再从\(1\)到\(y\) 先从\(x\)到\(n\ ...