`
madbluesky
  • 浏览: 83790 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

background-position减少小图片的连接数

Web 
阅读更多

background-position:xx yy;
1.xx表示背景图片(背景图片本身)从左往右的位移,如果xx的单位为px则表示位移xx个像素点,如果xx为一百分数则表示位移当前区域的50%px的位移
2.yy表示背景图片从上往下的位移,yy表示的数值与xx相同。
3. 如果xx为负值则表示从右往左移,如果yy为负值则表示从下往上移动
4.背景图片默认左上角对应所在区域的左上角

这项技术目前在web开发中被普遍采用,用来优化数量较多的小图片的显示。减少http请求,一张大图包含大量小图,然后通过background-position控制显示某张小图,
可以明显的减少图片数量,减少http请求数量

分享到:
评论

相关推荐

    css sprites图片背景优化技术

    2. CSS定位:然后,为每个原本应单独显示的小图片创建一个CSS类,设置对应的background-image为大图的URL,并通过background-position属性调整显示的位置。例如,如果小图在sprites图中的位置是(0px, 0px),则...

    input文本框里面显示小图片

    例如,可以使用`background-image`属性设置图片URL,`background-position`来调整图片位置,`background-size`控制图片大小。这样,图片就会作为文本框的背景显示出来。 ```css input { background-image: url('...

    css精灵图片例子.pdf

    CSS精灵图片(Sprites)是一种优化网页性能的技术,通过将多个小图片合并成一张大图,然后利用CSS背景定位(background-position)来展示需要显示的部分,以此减少HTTP请求,提高网页加载速度。CSS Sprites在处理...

    CSS雪碧图

    在CSS中,我们可以通过`background-position`属性来控制背景图的显示位置,达到显示不同部分的效果。例如: ```css .sprite { background-image: url('sprites.png'); width: 32px; height: 32px; } .button1 { ...

    CSS网页小图片合并工具

    这种工具的工作原理是将多张小图片合并成一张大图,然后通过CSS精灵(CSS Sprites)技术来定位和显示每个小图片,大大减少了网络传输的资源量。 CSS精灵是一种常见的前端性能优化技巧,它结合了多个小图像到一个大...

    详解使用CSS固定页面背景图片位置的方法

    综上所述,通过组合使用background-attachment、background-position和background-repeat属性,可以灵活地控制背景图片的行为。这些属性共同作用下,无论用户如何滚动页面,背景图片都能保持在固定位置,或者按照...

    CSS Sprites 技巧

    3. 优化性能:对于小图片,减少请求比压缩图片更能提高页面加载速度。 **注意事项** 尽管CSS Sprites有诸多优点,但也要注意其局限性,如弹性布局较差,不适合流式布局或响应式设计。此外,过多的Sprite图可能导致...

    CSS Sprites简介以及优缺点

    CSS Sprites的基本原理是将多个小图片合并到一个大的图像文件中,然后在HTML或CSS中通过调整`background-position`属性来显示所需的图像部分。这需要精确控制背景图片的位置,通常结合`background-image`和`...

    css sprite 工具

    - CSS Sprite的基本思想是将多个小图像拼接成一张大的图像文件,然后通过CSS的背景定位(background-position)属性来显示我们需要的部分。这样浏览器只需要加载一张图片,而不是每张小图片分别请求,减少了网络...

    css 图片生成器(各种小图智能帮你排版)

    通过CSS精灵(CSS Sprites)技术,我们可以将多个小图拼接成一张大图,然后通过CSS的`background-position`属性调整背景图片的位置,从而显示所需的子图像部分。这种方式减少了HTTP请求次数,提高了页面加载效率。 ...

    css sprites

    2. **设置背景定位**:在CSS样式表中,为需要显示小图片的元素设置背景图片为精灵图,并通过`background-position`属性指定小图片在大图中的位置。例如,`background-position:-8px -95px;`表示图片左上角距离大图左...

    CSS Sprites 的小工具

    2. **CSS定位**:然后,利用CSS的`background-image`属性设置精灵图作为元素的背景,并通过`background-position`属性来定位显示哪个小图像。由于每个小图都在大图中占有固定的位置,因此可以通过精确调整`...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    background-position: center top ; background-position: top center ; 指定两个方位名词时 与顺序无关 指定一个方位名词时 没有指定的那个默认是居中对齐 ②参数是精确单位 前面x 后面y 顺序不可变 若第一...

    css专区 多看看吧

    2. **背景定位**:在CSS中,通过设置`background-image`为大图的URL,并利用`background-position`属性来定位需要显示的小图标在大图中的位置。例如,`background-position:-8px -95px;`表示小图标在大图中的左偏移...

    CSS Sprite从大图中截取小图完整教程

    CSS Sprite技术是一种在网页设计中常用的图像处理技术,它的主要目的是将多个小图片合并到一张大图片中去,然后通过CSS的background-position属性来控制显示大图中的哪一部分,这样做的好处是减少网页的HTTP请求次数...

    前端开源库-css-sprite

    CSS Sprite的基本原理是将多个小图片通过图像编辑软件(如Photoshop、GIMP等)拼接在一起,形成一张大图,然后在HTML和CSS中通过设置元素的`background-image`属性引用这张大图,并利用`background-position`来控制...

    html+css入门小兔鲜项目

    4. 通过 PxCook 测量小图片左上角坐标,分别取负值设置给盒子的 background-position:x y 二、背景图片大小 背景图片大小属性可以设置背景图片的大小,语法为:background-size:宽度 高度;该属性可以将背景图片...

Global site tag (gtag.js) - Google Analytics