利用background-position xpos ypos

　　就是以图片的左上角顶点为原点，往下和右都为正，反之为负，移动图片

　　如: background-position: 15px 20px;（指将图片向右移15px,向下移20px）

　　　  background-position: left -29px;(当中的left指从图片的最左端读起，-29px就是将图片向上移动29px）

例子：

原始图片：

html代码：<!DOCTYPE html><html>

<head>

<meta charset="utf-8">

<title>图片拼合技术</title>

<style>

#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('img_navsprites_hover.gif') 0 0;}

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}

#prev{background:url('img_navsprites_hover.gif') -47px 0;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}

#next{background:url('img_navsprites_hover.gif') -91px 0;}

#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

</style>

</head>

<body>

<ul id="navlist">

  <li id="home"><a href="default.asp"></a></li>

  <li id="prev"><a href="css_intro.asp"></a></li>

  <li id="next"><a href="css_syntax.asp"></a></li>

</ul>

</body>

</html>

运行结果：

鼠标移动到第一个图片，颜色变暗，其实是重新移动了图片

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

鼠标移动上去时候，图片想上移动45px

　

　　

CSS 基础 例子 图片拼合技术的更多相关文章

  1. CSS 基础 例子 背景色 & 背景图片

    背景简写形式 : body {background:#ffffff url('img_tree.png') no-repeat right top;} 一.背景色  background-color ...

  2. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  3. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  4. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  5. CSS 基础 例子 水平 & 垂直对齐

    一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...

  6. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  7. CSS 基础 例子 行高line-height

    “行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...

  8. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  9. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

随机推荐

  1. 迈科DPI和运营商合作比较多

    业界领先的DPI/DFI解决方案提供商 专注网络流量数据和应用性能数据的分析优化   业界领先的DPI/DFI解决方案提供商 专注网络流量数据和应用性能数据的分析优化 Previous Next DP ...

  2. 用vs2015 编译 web app ionic

    1.要下载https://git-for-windows.github.io/ 2.下载ionic模版

  3. mysql 优化之一

    提升速度 show  variables like 'innodb_flush_log_at_trx_commit'; 会显示为1 set global innodb_flush_log_at_trx ...

  4. Luogu 2051[AHOI2009]中国象棋 - DP

    Description 在 $n * m$ 的格子上放若干个炮, 使得每个炮都不能攻击到其他炮 Solution 定义数组f[ i ][ j ][ k ] 表示到了第 i 行, 已经有2个炮的列数为 ...

  5. 04. pt-deadlock-logger

    死锁:是指两个或则多个事务在同一个资源上相互占用,并请求锁定对方占用的资源,而导致恶性循环的现象:当产生死锁的时候,MySQL会回滚一个小事务的SQL,确保另一个完成.上面是死锁的概念,而在MySQL ...

  6. mysql官网

    https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/

  7. libusb开发

    转:https://www.cnblogs.com/ele-eye/p/3261970.html

  8. GUI的优化操作/添加背景图片等

    一.背景图片的添加这是JAVA中添加背景图片的方式,基本思路先建立一个Label标签,然后建立一个层次的布局,将label标签添加到最下面去. ImageIcon image=new ImageIco ...

  9. 算法工程师B

    美团点评2017校招笔试真题-算法工程师B   1.以下关于经典的k-means聚类的说法哪个是错误的? A:k-means聚类算法是全局收敛的 B:k-means的聚类结果和初始聚类中心点的选取有关 ...

  10. CString成员函数详解[转]

    1.构造函数(常用) CString( const unsigned char* psz );      例:char s[]="abcdef";              cha ...