(1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点（0px，0px）开始读取的， 而你的图片全都在坐标系的 第四象限   background-position： x  y；（x，y为数值或百分比）第一个值是水平位置，第二个值是垂直位置。来定位图片的  那么x是正的，y 是负值。  
(2)至于以负值开头这种情况： 多半是你用在线生成器 生成雪碧图片，那么自带生成的 css 定位里边依据生成器内部定义的坐标系  那便有负值产生了。

为什么css定位雪碧图（合成图）都要以负号开头？的更多相关文章

  1. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  2. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  3. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  6. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  7. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

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

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  9. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

随机推荐

  1. [转]Java 反射在实际开发中的应用

    一:Java类加载和初始化 1.1 类加载器(类加载的工具) 1.2 Java使用一个类所需的准备工作 二:Java中RTTI 2.1 :为什么要用到运行时类型信息(就是RTTI) 2.2  :RTT ...

  2. Python爬取金山词霸每日一句，存储到MySQL中

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/7/3 20:25 # @Author : baoshan # @Site : ...

  3. 【iCore4 双核心板_FPGA】例程十五：基于单口RAM的ARM+FPGA数据存取实验

    实验现象: 写RAM命令格式:write:地址(0-255),数据(0-65535)\cr\lf 读RAM命令格式:read:地址(0-255)\cr\lf 核心代码: int main(void) ...

  4. WebMisSharp更新了，最新版本1.5.2，WebMisCentral-Client最新版

    WebMisSharp更新记录 Version 1.5.2 1.5.2下载地址:http://item.taobao.com/item.htm?spm=686.1000925.1000774.13.w ...

  5. 大数据基础篇----jvm的知识点归纳-5个区和垃圾回收机制

    一直对jvm看了又忘,忘了又看的.今天做一个笔记整理存放在这里. 我们先看一下JVM的内存模型图: 上面有5个区,这5个区干嘛用的呢? 我们想象一个场景: 我们有一个class文件,里面有很多的类的定 ...

  6. docker中，将容器中的文件拷贝到宿主机上

    需求说明: 今天在做docker修改配置文件的问题,一个容器要使用另外容器的一个配置文件,但是在宿主机上没有, 就考虑将容器中的文件拷贝到宿主机上,在此记录下操作过程. 操作过程: 1.通过docke ...

  7. [React] 02 - Intro: why react and its design pattern

    为啥使用React,给我个理由 过去 需要手动更新DOM.费力地记录每一个状态:既不具备扩展性,又很难加入新的功能,就算可以,也是有着冒着很大的风险. 不过,使用这种开发方式很难打造出极佳的用户体验. ...

  8. python的运行机制和版本区别

    引用来自:here 解释型语言和编译型 首先,我们编程都是用的高级语言(写汇编和机器语言的大牛们除外),计算机不能直接理解高级语言,只能理解和运行机器语言,所以必须要把高级语言翻译成机器语言,计算机才 ...

  9. 使用Anaconda3配置多版本Python虚拟开发环境

    有时候,为了使用比较干净的开发环境,或者为了测试一些版本的扩展库,我们可能需要创建虚拟开发环境,在不同的虚拟开发环境中,只安装需要的扩展库,这样可以最大程度上减少不同扩展库之间的兼容性带来的冲突或其他 ...

  10. IOS Https适配摸索

    转:http://www.jianshu.com/p/f312a84a944c https封面 在WWDC 2016开发者大会上,苹果宣布了一个最后期限:到2017年1月1日 App Store中的所 ...