CSS雪碧图的实现方法(即背景定位)

如图:想往当前的容器内放一个背景图片上的某个小图片,当前容器暂用div表示

<div class="sprite"></div>

//样式

<style>

//首先设定容器的宽高,即要放置的小图片的大小,否则背景图片就会超出显示了 如图片背景图片大小为80*20,图片名称sprite01.png ,小图片的坐标位置为(67,97)所以小图的定位相对原点来说是(-67,-97),如此即可。

.sprite{ width:80px; height:20px; background:url(sprite01.png) no-repeat  -67px -97px;}

</style>

当然一定要记得no-repeat .如果没有加no-repeat图片会一直平铺吧背景大小铺满哟。

时间: 2024-12-22 03:50:30

CSS雪碧图的实现方法(即背景定位)的相关文章

css雪碧图

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 一个简单的例子: 一张图片作出一个按钮的三个状态   一个链接用CSS做成按钮的样式,我们可以使用同一张图片,完成按钮的三个状态,a:link,a:hover,a:active. <a class="but

雪碧图的使用方法

CSS Sprites技术被国人称为CSS雪碧图,它是将一张网页中的一些图片拼凑在一张图片中,这样可以减少服务器的压力,因为它也减少了用户的请求次数. 雪碧图常用于一些小的零碎的图片,或者一组有序的图片. 比如这一张图片就是一张雪碧图 使用雪碧图主要的两个代码为: background-image backgorund-position 首先使用background-image:url(图片地址);将整张背景图放入需要的地方,设置div的宽高,然后再使用backgorund-position:x

使用compass自动合并css雪碧图(css sprite)(转载)

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 对于这种耗时.枯燥.重复性的工作,最好的解决方法还是交给工具去处理.本文就介绍下怎样使用compass来自动合并css雪碧图. 安装compass 首先请确认电脑已经安装ruby及sass环境,ruby及sass的安

CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他.因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊.原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标.现在发现雪碧图还是很有用的,把所有要用的图片放在一起,然后根据定位来调出要用的图片很方便. 随便写了个小demo:http://codepen.io/tianzi77/pen/xGGMBO 参照网站底部鼠标放上去的时候有一个切换效果. 代码也很简

CSS Sprites ——雪碧图的使用方法

首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能.更详细的解释请到[百度百科]围观. 雪碧图使用场景 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载量比较大 注:一些大图片.有动态效果图片无需使用雪碧图

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利

css sprite,css雪碧图生成工具V3.0更新

什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染 2.后期维护简单 该工具可以直接通过选择图片

css 雪碧图的制作

很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14

V4.0到来了,css雪碧图生成工具4.0更新啦

V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/detail/wx247919365/8685489 提示:如果不是win7或者程序运行不起来的话请下载微软的.net framework 3.5运行环境 一.增加客户端版本更新提醒 服务器端版本更新后,客户端如果没有更新要最新版本,会在标题中提示,点击更新按钮出现版本更新的简单介绍 二.删除多余的选择背