利用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. Linux网卡绑定探析

    2013-08-20 15:39:31 现在很多服务器都自带双千兆网口,利用网卡绑定既能增加网络带宽,同时又能做相应的冗余,目前应用于很多的场景.linux操作系统下自带的网卡绑定模式,Linux b ...

  2. BZOJ1047或洛谷2216 [HAOI2007]理想的正方形

    BZOJ原题链接 洛谷原题链接 显然可以用数据结构或\(ST\)表或单调队列来维护最值. 这里采用单调队列来维护. 先用单调队列维护每一行的最大值和最小值,区间长为正方形长度. 再用单调队列维护之前维 ...

  3. Codeforces 749D. Leaving Auction set+二分

    D. Leaving Auction time limit per test: 2 seconds memory limit per test:256 megabytes input:standard ...

  4. Java Swing 中使用 EventQueue

    public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { ...

  5. Metasploit学习

    阶段一:初步渗透 GO! msfconsole 相关漏洞 msf > search platform: windows xp sp3 查看某个漏洞后,查看漏洞详细信息 msf > info ...

  6. [ES]ES查询指南

    我们通常用用_cat API检测集群是否健康. 确保9200端口号可用: curl 'localhost:9200/_cat/health?v' 绿色表示一切正常, 黄色表示所有的数据可用但是部分副本 ...

  7. 获取input输入框中的值的方法

    方法一:获取input的文本值 <input class="form-text-normal" id="txtName" name="Name& ...

  8. 微信JSSDK接口previewImage

    <div class="pics"> <img src="http://pic1.ytqmx.com:82/2015/0409/01/15.jpg!96 ...

  9. On the internet, nobody known you are a dog !

  10. git舍弃文件更改

    未进行任何提交,即文件更改在工作区 # filename 对应进行操作的文件名 git checkout -- filename 已用git add 命令提交,即文件更改在暂存区 # 舍弃暂存区的修改 ...