上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。

Css Sprites

Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

我们需要Sprites图片，可以在网上下载，可以叫美工做些，可以在线生成。这里推荐一个在线生成的网站。https://www.toptal.com/developers/css/sprite-generator

我们使用的图片是这个样子~~

下面的代码展示两个div，开始它们有背景图片，当光标悬停时切换到另一张图片。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Sprites</title>
        <style type="text/css">
            div{
                width:76px;
                height:76px;
                background: url(https://www.liyongzhen.com/docs/images/sprit.png);
                background-repeat:no-repeat;
                display: inline-block;
            }  
            div.one{
                background-position:0px 0px
            }
            div.one:hover{
                background-position:0px -76px
            }
            div.two{
                background-position:-76px 0px
            }
            div.two:hover{
                background-position:-76px -76px
            }          
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>
 

background-position 属性有两个值，第一值表示水平位置，正值表示往前，负值表示往后。第二个表示垂直位置，正值表示往上，负值表示往下。

background-position 属性值需要慢慢调整，细心+耐心就能做好。

盒子大小背景图像大小可以调整。这里我们使用默认的大小。

计算结果GIF动画：

CSS 图像高级 Css Sprites的更多相关文章

  1. CSS 图像高级 CSS 渐变

    CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...

  2. CSS 图像高级 径向渐变

    径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  6. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  7. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  8. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  9. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

随机推荐

  1. Centos6.9部署Gitlab-11.9.8并汉化

    Git 是一种分布式的代码版本管理系统,git在工作时可以不用时刻依赖后台服务器,在本地电脑上就可以管理版本控制,但是在需要协同开发时就必须要使用后台服务器了,目前互联网上有github,码云这样的远 ...

  2. Notepad2用法说明

    Notepad2用法说明:1.替换系统记事本.bat和恢复系统记事本.bat可以替换.回复系统记事本.2.查看→默认字体,编程可用Consolas,字号四号.3.查看→自定义方案,Identifier ...

  3. git切换远程仓库地址

    $ git remote  -vorigin  http://192.168.1.100/aaa/Project.git (fetch)origin  http://192.168.1.100/aaa ...

  4. IDEA汉化

    1.- 汉化包 提取码: 4mbq 2.打开IDEA,执行下列操作:在主界面选择File → Settings → Appearance&Behavior → Appearance → 勾选O ...

  5. 学习python第三天

    变量的命名规范 1.只能有 字母 数字 及_组成 2.不能以数字开头 3.避免与系统关键词重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样做) 4._开头的变量都有特出含义 5 ...

  6. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  7. 二、初步认识springBoot的pom.xml

    1.  大体结构 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  8. 爬虫系列2：Requests+Xpath 爬取租房网站信息

    Requests+Xpath 爬取租房网站信息 [抓取]:参考前文 爬虫系列1:https://www.cnblogs.com/yizhiamumu/p/9451093.html [分页]:参考前文 ...

  9. WebBrowser2控件使用

    一 简介 这是一个IE实现的com接口, 简单的浏览一个网页可以用这个东西, 局限性是IE现在有好多版本, 不同版本对标准的支持是不一样的, 而且将来不排除windows把IE给干掉了 二 使用 1 ...

  10. MyPubMedID

    MyPubMedID是北京同舟云信息技术公司全新开发的新一代生物医学文献检索与分析平台. 该平台对PubMed全部内容进行重新清洗.组织.挖掘和开发,在完全消除PubMed检索歧义的同时,能够保证检索 ...