(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. SourceInsight: sourceInsight4.0 修改默认字体

    快捷键 Alt + Y

  2. iOS中如何创建一个滑出式导航面板(1)

    本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...

  3. linux每日命令(24)：Linux 目录结构

    一. 简介 对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只 ...

  4. 9款最好的JavaScript压缩工具

    削减是一个从源代码中删除不必要的字符的技术使它看起来简单而整洁.这种技术也被称为代码压缩和最小化.在这里,我们为你收集了10个最好的JavaScript压缩工具将帮助您删除不必要的空格,换行符,评论, ...

  5. 【九天教您南方cass 9.1】 09 提取坐标的几种方法

    同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...

  6. 川崎机器人c#通讯（转）

    由于本人在工业自动化行业做机器视觉的工作,所以除了图像处理方面要掌握外,还需要与工业机器人进行通信.最近学习了计算机与川崎机器人的TCP/IP通信,于是在这里记录一下. 除了直接与机器人通信外,有一种 ...

  7. CLOS网络

    CLOS网络是指为了降低多级交换网络的成本,长期以来人们一直在寻找一种交叉点数随入.出现数增长较慢的交换网络,其基本思想都是采用多个较小规模的交换单元按照某种连接方式连接起来形成多级交换网络.

  8. centos7 网络配置

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPR ...

  9. Make ProgressBar Vertical

    Create a drawable in your Drawable folder called vertical_progress_bar.xml: <?xml version="1 ...

  10. [Tensorflow] Cookbook - CNN

    Convolutional Neural Networks (CNNs) are responsible for the major breakthroughs in image recognitio ...