background | 易学教程

关于图片不变形适应屏幕的解决方法（vue为例）

阅读更多关于关于图片不变形适应屏幕的解决方法（vue为例）

（此处背景图宽：高=1.92） 1.在html中设置两种可选择的类： < div class = "login-container" v-bind:class = " [{ 'cal-backgound-size-width' : ! calBgImage },{ 'cal-backgound-size-height' : calBgImage }] " > 2.css样式：宽度自适应： .cal-backgound-size-width { background : url ( '/../../../static/bg.png' ) no-repeat ; background-size : auto 100% ; } 高度自适应： .cal-backgound-size-height { background : url ( '/../../../static/bg.png' ) no-repeat ; background-size : 100% auto ; } 3.js控制 mounted () { this . calBgImage = ( document . body . clientWidth / document . body . clientHeight ) > 1.92 // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．

如何使div的浏览器窗口高度为100％

阅读更多关于如何使div的浏览器窗口高度为100％

问题： I have a layout with two columns - a left div and a right div . 我有两列的布局-左 div 和右 div 。 The right div has a grey background-color , and I need it to expand vertically depending on the height of the user's browser window. 右边的 div 具有灰色 background-color ，我需要根据用户浏览器窗口的高度将其垂直扩展。 Right now the background-color ends at the last piece of content in that div . 现在， background-color 在该 div 中的最后一条内容处结束。 I've tried height:100% , min-height:100%; 我已经尝试过 height:100% ， min-height:100%; , etc. 等解决方案：参考一： https://stackoom.com/question/6blV/如何使div的浏览器窗口高度为参考二： https://oldbug.net/q/6blV/How-to-make-a-div

用Jquery自己开发个代阴影的对话框吧！

阅读更多关于用Jquery自己开发个代阴影的对话框吧！

【Vue_10】渐变色文字

阅读更多关于【Vue_10】渐变色文字

实现渐变色文字的原理，将背景色改为渐变，然后将背景剪裁出文字，最后将文字隐藏一. CSS 样式示例 /* 将背景设为渐变 */ background-image: -webkit-linear-gradient(top, white, #a4a4a4, #6a6b6b); /* 规定背景绘制区域 */ -webkit-background-clip: text; /* 将文字隐藏 */ -webkit-text-fill-color: transparent; 二. 属性详解 1. linear-gradient linear-gradient() 函数用于创建一个线性渐变的 "图像"。浏览器支持语法 /* direction: 方向；color-stop: 颜色 */ background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 示例 /* 从左侧开始的线性渐变，从红色开始，转为黄色 */ background-image: linear-gradient(to right, red , yellow); /* 从左上角到右下角的线性渐变 */ background-image: linear-gradient(to bottom right, red , yellow); 2.

jquery 拼图小游戏

阅读更多关于 jquery 拼图小游戏

趁着周末写了个小游戏，拼图，原理简单，首先分格，500x500 ,就分为100x100的25格大概流程是， 1 点击格子时候，先检测是否有已经点击的格子，如果不存在，则直接加上“on”的样式，标记为要切换的格子 2 存在已经有"on"的格子，就检测是否可以切换格子位置，检测的标准时横纵相减的绝对值的和一定为1. 3 如果是1 则切换其他则取消之前已经标记需要切换的格子的“on”的样式，给新的点击的格子标记上“on” 效果图代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拼图游戏</title> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <style type="text/css"> .mapSource{width:500px; height:500px; position:relative; border:1px solid gray; float:left;

HTML5性能优化

阅读更多关于 HTML5性能优化

HTML5性能优化在看完这两章内容之后，我意犹未尽，于是乎从网上搜索关键字“Java Web高性能”，在IBM社区找到两篇不错的文章，而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高度相似，不知道是谁抄袭谁的，大家可以鉴别下真伪，下面附上地址。 http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdf http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/ http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/ 前面是读后感，下面是我针对最近几天学习到的提高Web性能进行了篇幅不小的总结，一来为新人提供帮助，二来自己做一下笔记，加深记忆。性能之前端篇 --减少重绘在HTML页面完成展现之后，动态改变页面元素或调整CSS样式都会引起浏览器重绘，性能的损耗直接取决于动态改变的范围：如果只是改变一个元素的颜色之类的信息则只会重绘该元素；而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘。减少重绘并不是说不要重绘，而是要注意重绘范围：①改动的DOM元素越深则影响越小，所以尽量深入节点改动

好用的IDEA插件

阅读更多关于好用的IDEA插件

1、Background Image Plus 默认IDEA的背景一般都比较单调，要么白乎乎，要么褐乎乎，而 Background Image Plus 这个插件可以为IDEA设置自定义图片作为背景，而且还可以设置透明度，从此写代码乐趣十足! 来源： oschina 链接： https://my.oschina.net/weiweiqiao/blog/3220383

iOS开发：后台运行以及保持程序在后台长时间运行

阅读更多关于 iOS开发：后台运行以及保持程序在后台长时间运行

第一部分 1.先说说iOS 应用程序5个状态：停止运行-应用程序已经终止，或者还未启动。不活动-应用程序处于前台但不再接收事件（例如，用户在app处于活动时锁住了设备）。活动-app处于“使用中”的状态。后台-app不再屏幕上显示，但它仍然执行代码。挂起-app仍然驻留内存但不再执行代码。按下Home键时，app从活动状态转入后台，绝大部分app通常在几秒内就从后台变成了挂起。在内存吃紧的时候，iphone会首先关闭那些挂起的app。从 iOS 4 开始，应用就可以在退到后台后，继续运行一小段时间（10 分钟）； 2.还可以把自己声明为需要在后台运行，就能不限时地运行了。不过限制为播放音乐、使用 GPS 、voip、。值得一提的是，有的应用为了达到后台不限时运行的目的，在后台播放无声的音乐（审核不一定会被发现）。 iOS 5 开始又多了一种类型：下载报刊杂志。然后 iOS 7 则可以下载各种玩意和定时抓取。 iOS 7 需要注意的区别：iOS 7 以前，应用进入后台继续运行时，如果用户锁屏了，那么 iOS 会等待应用运行完，才进入睡眠状态。而在 iOS 7 上，系统会很快进入睡眠状态，那些后台应用也就暂停了。如果收到事件被唤醒（例如定时事件、推送、位置更新等），后台应用才能继续运行一会。因为处理过程变成了断断续续的，因此下载时也要使用 NSURLSession

javascript进度条

阅读更多关于 javascript进度条

function showProgressBar() { if( document.all('operatingFlagPanel') != null ) { alert("当前的操作未完成，不能进行其他的操作！"); return false; } var iStr =""; iStr += "<div id='operatingFlagPanel' style='position:absolute;height:12px;width:250px;z-index:9999'>\r\n" + " <marquee loop direction='right' title='装载中...' scrollamount='6' scrolldelay='100' style=\"cursor:'wait';border:1px solid ButtonShadow;background:#FFFFFF;height:30px;font-size:1px;margin:1px;width:300px;-moz-binding:url('marquee-binding.xml#marquee');-moz-box-sizing:border-box;display:block;overflow:hidden;\">\r\n" + " <span style='height:26px

始终让footer在底部

阅读更多关于始终让footer在底部

1.footer保持在页面底部需求：我们希望footer能在窗口最底端，但是由于页面内容太少，无法将内容区域撑开，从而在 footer 下面会留下一大块空白第一种方法：采用 flexbox布局模型（将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕）代码： <div id="container"> <header>header</header> <section class="main">main</section> <footer>footer</footer> </div> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #container{ display: flex; flex-direction: column; height: 100%; } header{ background: #999; flex: 0 0 auto; } .main{ background: orange; flex: 1 0 auto; } footer{ background: #333; flex: 0 0 auto; } 第二种方法：采用footer高度固定+绝对定位（注意

订阅 background