rem布局下使用背景图片和sprite图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊这方面的东西. rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2…

在rem布局下使用背景图片以及sprite

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊这方面的东西. rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem;…

利用selector设置ImageButton不同状态下的背景图片

1.自定义MyButton类 public class MyButton extends Button { //This constructormust be public MyButton(Context context, AttributeSet attrs) { super(context, attrs); } public MyButton(Context context) { super(context); } private Paint mPaint = null; priv…

document.execCommand("BackgroundImageCache",false,true)解决ie6下的背景图片缓存问题

E6下的背景图片每次使用都会重新发送请求(not 本地),连一个hover效果时候同样的背景图片仅仅位置不同而已,ie6都会再次发送请求,这个令人崩溃的事情需要解决掉:对于ie来说,filter:expression 很强大,能够实现的功能超级多,但是更对于视效率如生命的程序员来说,它的效率不敢令人恭维,所以有人会用css方法实现ie6下背景图片缓存,但是这种人也就是崇拜微软的强大而已,无它, html {filter:expression(document.execCommand("Backg…

swing实现QQ登录界面1.0（实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）

swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下次给一个图片路径,如果加载过,就直接拿去用就可以了):我们选择封装在一个工具类里,如何实现同一种图片只加载一次呢? 我们选择了Map集合: (Map集合的好处就是避免重复,同时Map还有键值对,键:放图片路径(具有唯一性),值:放图片控件.可以通过图片路径获得图片控件) 我们定义了静态的(工具类嘛)…

android 中ImageButton按下改变背景图片的效果

最近在做一个app的登陆界面,才发现原来认为很简单的UI效果,其实背后却蕴含的知识很多,积累一个算一个吧. 实现方法有两种:一种是添加代码,一种是配置xml文件. 方法一:代码添加 ImageButton btn = (ImageButton)findViewById(R.id.imageButton1); btn.setOnTouchListener(new View.OnTouchListener(){ public boolean onTouch(View v, MotionEvent e…

转载--使用image-set来优化在retian屏幕下的背景图片

mage-set对我来说,我也很陌生,于是借助G爸和度娘海量的搜索image-set,才知道Webkit内核"safari6"和“chrome21”支持CSS4的background-image新规范草案image-set.通过Webkit内核的浏览器私有属性“-webkit”,image-set为Web前端人员提供了一种解决高分辨率图像的显示,用来解决苹果公司提出的Retian屏幕显示图片的技术问题.简而言之:这个属性用来支持Web前端人员解决不同分辨率下图片的显示,特别的(Reti…

IE6下png背景不透明——张鑫旭博客读书笔记

从今天开始跟着大牛张鑫旭的步伐,每天进步一点点问题:IE6不支持png背景透明或半透明一.可解决的方法补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同.css滤镜可分为基本滤镜和高级滤镜两种.css滤镜分类 CSS滤镜可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜.而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜. 只有IE可以完全的支持滤镜,Firefox支持部分,其他内…

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca…

兼容各浏览器的css背景图片拉伸代码

需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , sizingMethod= 'scale' ); 在ie中试用了一下还不错,背景图片可以拉伸了,但看到用了滤镜,看来火狐.谷歌等应该不兼容吧,用火狐.谷歌测试了下,背景图片没有了.东找西找,终于找到了可以兼容各个浏览器的css背景图片拉伸代码: background-image:url(***.jpg…

HTML连载34-背景关联和缩写以及插图图片和背景图片的区别

一.背景属性缩写的格式 1.backgound:背景颜色背景图片平铺方式关联方式定位方式 2.注意点: 这里的所有值都可以省略,但是至少需要一个 3.什么是背景关联方式默认情况下,背景图片会随着滚动条的滚动而滚动,如果不想这样,那么我们可以修改它们的关联方式 4.格式: background-attachment:值: 值的取值范围: scroll:默认值,会随着滚动条而滚动. fixed:不会随着滚动条滚动而滚动. 5.例子: <!DOCTYPE html> <htm…

css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

背景图片基础: 使用background-image来设置背景图片语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角如果背景图片和元素一样大,则会将背景图片全部显示如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素可以同时为一个元素指定背景颜色和背景图片这样背景颜色将会作为背景图片的底色般情况下设置背景图片时都会同时指定一个背景颜色(因为加载外部图片需要一定的时间.再图片加载出来之前.会先显示颜色) 背景图片默…

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样…

ie8下背景图片平铺问题

IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景图片拉伸问题. 仅需如下代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../img/news/news-banner.png', sizingMethod='scale'); -ms-filter: prog…

一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用js来append操作,亲测了都不管用.除非把autocomplete=“off”关了,但这就不符合需求了如图网上说的改变-webkit-autofill的阴影背景是可以去除黄色背景的,但是图片依旧被覆盖了. input:-webkit-autofill{ box-shadow:0 0 0px…

IE下背景图片不显示问题

转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情况的朋友可以参考下很久木有写点什么了,最后干的活比较杂.除了公司里的事情之外,还写了点别的东西. 刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的:…

一款基于jquery的下拉点击改变背景图片

今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览源码下载实现的代码. html代码: <a href="#" class="but"></a> <div id="hf"> <div class="con"> <img src="images/left.png&qu…

ie6下：png图片不透明和背景图片为png的节点的内部标签单击事件不响应

1.png图片不透明少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader(src="../a.png"); 注意: 测试发现如果把样式写在css文件里,而非当前页面的<style></style>里,则不会生效. 图片多时:使用js插件,可参考ie6里png图片不透明. 其实如果是少量图片,可以直接把png改成gif,就不用特意为ie6作…

纯CSS控制背景图片100%自适应填充布局

https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; background-size:100% 100%; position:absolute; fil…

关于ie6 下背景图片不透明以及Img不透明

ie6 下背景图片不透明的方法,加上下面的js即可解决 //解决IE6下图片不透明 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) &…

iOS下uiview和uiscrollview设置背景图片的源码

1.uiscrollview 设置背景图片 // Setup the Scroll ViewUIScrollView*tempScrollView=(UIScrollView*)self.view;tempScrollView.contentSize=CGSizeMake(320,720); // Set Stationary Background, so that while the user scroll the background is// fixed.UIImage*img =[UII…

Android 编程下背景图片适配工具类

package cn.sunzn.util; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; /** * 处理背景图片的一些工具,如放大缩小... */ public class BgUtil { /** * 使背景图片适应手机屏幕分辨率 * * @param context…

IE模式下背景图片不显示

初衷是想给这个提交按钮<input type="submit" value=" />加上背景图片,用了以下css样式: .subtn input { background-attachment: scroll; background-image: url(images/btn.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 20px; width: 60px; bo…

flex布局下img图片变形的解决方法

图片正常效果图片变形效果一.flex-shrink: 0 给 img 设置 flex-shrink: 0; flex-shrink 的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩.设置为0表示不收缩. flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值.注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用. 缺点:仅兼容IE11 二.height: 10…

base64：URL背景图片与web页面性能优化

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么? 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码: thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就…

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直…

rem布局加载闪烁问题

说明:以下内容来自CSDN,如有侵权,请立刻联系博主(我),我将删除该内容. 原文链接 https://blog.csdn.net/u013778905/article/details/77938784 先上体验地址:http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage 扫描二维码: 问题翻到文章底部(反思1024),查看最新解决方案. rem布局在加载的时候会出现元素一开始很小,闪烁…

盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开设置了宽高一定采用设置的宽高显示宽高 border+padding+content 自身布局 margin-top | margin-left 兄弟布局 margin-bottom | margin-right 父级水平居中 margin:0 auto; 与inline相关的盒子 vertical-align ''' 文…

小tip: base64:URL背景图片与web页面性能优化——张鑫旭

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码:thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),…

小tip: base64:URL背景图片与web页面性能优化

转自:http://www.zhangxinxu.com/wordpress/?p=2341 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码: thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTF…

【rem布局下使用背景图片和sprite图】的更多相关文章