利用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. Can I win LT464

    In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...

  2. python常用命令

    安装sudo easy_install pip 列出已安装的包pip freeze or pip list 导出requirements.txtpip freeze > <目录>/r ...

  3. 使用mysql proxy对数据库进行读写分离

    服务器安排如下: 192.168.100.128 主 192.168.100.129 从 192.168.100.130 mysql-proxy 1.在100.130中下载安装mysql-proxy ...

  4. 在离线安装gazebo的时候可能在运行turtlebot_gazebo的时候会出现问题

    问题显示如下 gzserver: /build/ogre-1.9-mqY1wq/ogre-1.9-1.9.0+dfsg1/OgreMain/src/OgreRenderSystem.cpp:546: ...

  5. .net写本地文件的一个方法

    整理代码,.net在本地写html文件的一个方法,代码如下 public static void WriteFile(string FilePath, string FileInfo, string ...

  6. js--延时消失的菜单--（笔记）

    html:有4个li,li下分别有一个span <script>   window.onload=function(){    var aLi=document.getElementsBy ...

  7. sql2005性能优化（在32位系统上突破2G内存使用量的方法） .

    转载自http://blog.csdn.net/soldierluo/article/details/6589743 服务器磁盘为(SAS)IBM组成RAID0+1,SQL2K5只识别4G内存,实际只 ...

  8. regexper-正则表达式检验

    https://regexper.com 例如:输入 \s.?\w{1,3}(\d(\W)(#?\d{1..4}))

  9. Java类加载机制及自定义加载器

    转载:https://www.cnblogs.com/gdpuzxs/p/7044963.html Java类加载机制及自定义加载器 一:ClassLoader类加载器,主要的作用是将class文件加 ...

  10. TFS SDK

    vs2013 已包含. 可参考 TFS SDK: Connecting to TFS 2010 & TFS 2012 Programmatically http://geekswithblog ...