背景图

手把手教你WEB套打程序开发

阅读更多关于手把手教你WEB套打程序开发

WEB套打可选方案不多，理想的更少，利用免费控件Lodop+JavaScript实现精确套打，算是较为经典的选择。这种方案其实比较简单，利用一个 htm 文件就可以实现模板设计过程，几乎是“空手套”式的开发，但理解这几个步骤还是需要点时间，下面一步步详细演示说明：第一步：建立一个空白的模板设计文件把以下超文本代码复制到一个本地htm文件中： <html> <body> <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object> <script language="javascript" type="text/javascript"> function CreatePrintPage() { LODOP.PRINT_INIT("套打EMS的模板"); }; </script> 进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();">模板设计</a><br><br> 进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PREVIEW();"

阅读更多关于背景图

背景画布特点：最小宽度为视口宽度最小高度为视口高度 HTML元素背景特点：覆盖画布 body元素背景特点：如果HTML元素有背景，body元素正常显示（背景覆盖边框盒）如果HTML元素没有背景，body元素的背景覆盖画布画布背景图(body) 特点：背景图的宽度百分比，相对于视口背景图的高度百分比，相对于网页高度背景图的横向位置百分比、预设值都相对于视口背景图的纵向位置百分比、预设值都相对于网页的高度来源： https://www.cnblogs.com/tujw/p/12002947.html

css背景图不显示的问题

阅读更多关于 css背景图不显示的问题

css添加背景图片无法显示，有以下几方面原因：　　1、css没有被调用；请检查css调用是否成功。　　2、css图片地址不对；请检查css图片地址是否正确。　　3、div的高度没有固定，是auto或者没有设值；div设置错误容易导致背景图片高度太大则无法显示。　　4、div被嵌套；查看嵌套的div是否设置正确。　　5、div代码不规范；请检查div代码是否书写正确。另：来源： https://www.cnblogs.com/-ting/p/12000674.html

background-size值为cover和值为100%的区别

阅读更多关于 background-size值为cover和值为100%的区别

background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。　IE8及以下版本用滤镜来兼容background-size如下: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 下面我通过给下图背景图添加 background-size 属性的不同属性值，更直观的显示出 100% 和 cover 的区别　　下图是添加 background-size:100% 100% 后的背景图效果，背景图被拉伸后有点失真　　下图是添加 background-size: cover 后的背景图效果，背景图被拉伸后背景图不能全部显示　　　　它们的区别：　　　　 background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，　　　　可能导致图像失真（建议让UI给原始背景图，否则容易出现图片拉伸后失真）　　　　 background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，　　　　图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像来源：

使用img标签和背景图片之间的区别

阅读更多关于使用img标签和背景图片之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素，但是可以设置宽高，占位， img设置width后height会自适应匹配，如果设置height后width会自适应匹配,如果同时设置width，height，img图片可能会变形 2.background-image 它是css的一个样式，并不占位，可以结合background-size,background-repeat,background-position等属性来设置图片位置，大小等它所在的元素必须指定height，否则背景图片显示不出来，可以不指定width，如果不指定width，它的宽度则继承父元素的宽度 3.它们之间的不同 img是html标签，占位，background-image是CSS样式，不占位 img是document对象可以操作(比如：从document对象中删除)，background-image是不能操作的在网页加载过程中，img作为网页结构内容的一部分，会在加载结构的过程中加载，而background-image作为css样式的一部分，会在结构加载完成后开始加载。(如果你引入了一个很大的图片，在这个图片下载完成之前，img后面的内容都不会显示，而如果用css引入同样的图片

css背景图面书写顺序

阅读更多关于 css背景图面书写顺序

在css中运用背景图面的(雪碧图)地址要写在背景定位代码上面 background-position: *** px ***px; 这样背景定位代码才会正常执行, 哪怕是在一个{ }中也要把背景图面的(雪碧图)地址写在背景定位代码上面如果顺序颠倒,背景图不显示, 来源： https://www.cnblogs.com/0826sw/p/11934287.html

css学习之路(四)高级技巧

阅读更多关于 css学习之路(四)高级技巧

一、元素的显示与隐藏　　1.通过设置display属性　　　　display：none；　　//设置元素隐藏　　　　display：block；　　//设置元素为块级元素，同时也有显示的效果　　2.通过设置visibility可见性（了解）　　　　visibility：visible ; 　对象可视　　　　visibility：hidden; 　对象隐藏　　3.通过overflow（溢出）属性（重点）　　　　　　总结，第一种元素被隐藏后不会占据位置；第二种元素被隐藏后仍然占据位置，使用较少；第三种主要用于隐藏超出的部分，也用于清除浮动二、用户界面样式显示　　1.鼠标样式cursor，通过给cursor设置属性值来实现　　　　　　2.轮廓线outline，用来凸显元素，位于边框边缘的外围　　//表单默认是有轮廓线的，其它的需要手动设置　　　　outline : outline-color ||outline-style || outline-width 　　3.防止拖拽文本域resize 　　　　一般设置成 resize：none　　//表示不可拖拽三、垂直对齐　　1.vertical-align：middle　　//垂直居中，只针对行内元素以及行内块元素　　2.让溢出的文字用省略号的形式显示　　　　　 /*1. 先强制一行内显示文本*/

body的背景

阅读更多关于 body的背景

body的背景背景background-color：默认border-box 画布canvas 一块区域背景background-color的画布的特点：（画布大于等于视口）最小宽度视口宽度最小高度视口高度 html元素的背景：覆盖画布 body元素的背景颜色（推荐）如果html元素有背景颜色，body背景颜色正常覆盖边框盒，否则，body背景颜色覆盖画布画布设置背景图片（总结就相对html元素）背景图宽度的百分比是相对于视口window.innerWidth 背景图的高度百分比相对于html元素的height（网页高度）背景图的横向位置百分比，预设值，相对视口背景图的纵向位置百分比，预设值，相对html的height(网页高度) 例子： html{ padding:10px; } body { width:1200px; border: 4px dashed red; background: url('../img/201801.png') no-repeat; background-size:50% 50%;//背景图width=视口宽度*50%；背景图高度height=html高度*50%； background-position:right 10px bottom 10px;//相对视口右边10px,相对html下边缘10px } 来源： https:/

同一标签添加多个背景图

阅读更多关于同一标签添加多个背景图

background-image: url("img"), url("img"); background-repeat: no-repeat, no-repeat; background-position: 138px 18px, 33px 6px; 来源： https://www.cnblogs.com/wulicute-TS/p/11915453.html

九宫格图片制作

阅读更多关于九宫格图片制作

1.原理及说明九宫格图片就是将一张图片分成9份，再拼成一个完整的图片，如图：原理：创建9个正方形容器，利用背景图定位，每个容器只显示其中的一部分，最终拼接成一张完整的图片实现思路： (1)使用flex布局，让9个子元素以 3*3 的形式摆放 (2)因为图片有纵向和横向两种可能，所以要对图片的宽高比进行判断，以此来判断图片的方向，并根据图片的方向决定背景图定位信息。 (3)将图片的url放入文本框中，通过按钮点击事件将url对应的图片设置成容器的背景图 (4)使用FileReader()读取本地选中的图片时，会花费1-2s的时间，在此时间内显示一个蒙版遮罩，用来提示用户“加载中...” (5)为了美化按钮，使用了bootstrap 2.HTML代码 HTML代码分为3个部分： (1)操作区，包括文本输入框和按钮 (2)九宫格图片区，用于显示背景图 (3)蒙版遮罩 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

订阅背景图