利用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. Internet

    0x01 URL的解析/反解析/连接 解析 urlparse()--分解URL # -*- coding: UTF-8 -*- from urlparse import urlparse url = ...

  2. netsharp.weixin和sdk的配置信息管理

    一.微信公众号后台配置 即在微信公众号后台配置类似如下的url:http://121.40.86.55/wx?oid=gh_befcc6d4c40d 这种情况下会执行WeixinServlet类的do ...

  3. /bin/sh^M:bad interpreter:

    /bin/sh^M:bad interpreter: No such file or directory 这个错误发生在你在windows下编写文件上传到linux服务器去运行的时候. 错误原因:wi ...

  4. 如何为终端用提供更快的解决方案？让IT技术员具备更高的效率？

  5. Scrapy框架爬虫

    一.sprapy爬虫框架 pip install pypiwin32 1) 创建爬虫框架 scrapy startproject Project # 创建爬虫项目 You can start your ...

  6. tms web core 与 kbmmw 第一次亲密接触

    最近,tms 经过1年多,集合了数十名高手大牛,开发出了一个跨时代的产品,就是tms web core. 具体的介绍详见官网,https://www.tmssoftware.com/site/tmsw ...

  7. IOS 在一个透明视图上添加不透明的子控件

    环境: 在一个透明的view中添加一个tableview,tableview也变透明了. 解决: 不要这样设置view的透明度 view.backgroundColor = [UIColor clea ...

  8. lepus部署

    lepus部署 lepus安装 cd /usr/local/src/lepus_v3.7/ cd python/ sh install.sh mysql配置 mysql -uroot -p'zaBBi ...

  9. IntelliJ IDEA 2017版 spring-boot2.0.4的yml配置使用

    一.必须配置字端两个 server: port: 8080 servlet: context-path: /demo 二.两种mvc转换springboot,一种是注解,一种就是.yml或proper ...

  10. GHOST完成后出现GRUB解决方法

    1.试一下这个命令: grub> rootnoverify (hd0,0)(注意空格!!!) 或者 grub>makeacrive (hd0,0)grub> chainloader ...