【css sprite 调整大张图片中小图标的大小】的更多相关文章

css sprite 调整大张图片中小图标的大小

直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px; width: 190px; height: 154px; } 现在取正常图标大小的一半: <pre name="code" class="html">…

css：自己实现一个带小图标的input输入框

有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:url(images/ent2.png) no-repeat 260px 12px">…

CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置.   CSS 雪碧图技术不是什么新东西,在网页应用中已经有几年了,现在的网页开发在图标图片的应用上已经趋向于使用字体图标,这是一种比CSS雪碧图技术更优雅的图标应…

关于input输入框内设置小图标的问题

其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder="yyyy-MM-dd" type="text" > 写好input标签后就看css大显身手了 #test1{ background-image: url(icon/calendar.png);/*设置小图标为背景*/ background-size:18px 1…

【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复,位置:以及文字相关的padding,无序列图标,行高等*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd…

GWT 中实现“CSS Sprite”

近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见  互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后才能正常浏览.那么浏览器从服务器上下载资源时,时间都耗在TCP/IP的连接,然后服务器还要准备资源.如果一个网页中有几十甚至上百张图片的话,其中消耗的时间可想而知.在普通的html网页中,我们可以把所有的一些常用图标放在一张图片中,然后通过"background-positon:x y"来…

CSS Sprite雪碧图应用

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

background-size之CSS Sprite巧用

前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起来,还要求我兼容ie8及以下,我一定放弃维护多年的淑女形象,拿起刀!!!干什么,你懂的!当然,我大天朝的XX网站以及领导的审美除外!毕竟,我还是一朵需要祖国的阳光沐浴而茁长成长的老花朵!言归正传,聊一聊今天的主题. background-size CSS3属性.用法主要有下面4种. length 设…

CSS Sprite笔记

1. 什么是CSS Sprite 将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度.每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请求数是有限制的.使用雪碧图并不能减少传送的数据的总量,但可以通过节省掉一部分建立.关闭连接的时间来加快网页的加载速度. 2. 如何使用 2.1 怎么得到雪碧图? ※ 直接手动拼接,只要可以将需要用到的小图片拼在一张图片上即可,当然,拼接应该尽量遵循的原则: 尽量让这张图片以后可维护: 在保证可维护性…

css sprite 雪碧图

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导致访问速度变慢.这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置.…