上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如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. 简易Asset工作流

    前言: 当前比较主流的制作流程都可以按顺序细分为三个部分:资产环节(asset section),镜头环节(shot section),合成环节(composite section). 考虑到单一资产 ...

  2. @RequestParam、@ReqeustBody、@ReponseBody认识

    简介: @RequestParam和@RequestBody均是处理request body部分的注解,都用于获取请求部分的参数. @ResponseBody是用于响应部分的注解 1. @Reques ...

  3. Python量化分析，计算KDJ

    Python: v3.6 Pandas: v0.23.4 使用以下方法计算与国内财经软件显示一致 low_list = df['最低价'].rolling(9, min_periods=9).min( ...

  4. 给datagridview的下拉框添加valueChange事件

    修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...

  5. linux操作系统中安装redis

    第一步:安装gcc编译软件 redis是用c编写的,在下载之后需要使用gcc编译之后才能安装,首先需要下载gcc yum install gcc-c++ 第二步   下载redis安装包,并解压编译 ...

  6. iPerf 笔记

    iPerf 笔记 iperf 是一个网络性能测试工具,可以测试最大TCP和UDP带宽质量,具有多种参数和UDP特性,可以报告带宽.延迟抖动和数据包丢失. iperf 可以用来测一些网络设备,比如路由器 ...

  7. 所有设计复杂的ORM都是浮云

    很久没有写文章了. 一直很忙,不是很有时间整理. 今天主要是来吐槽下那些设计很复杂的ORM的. 项目做的越多,越觉得ORM这个东西设计的太复杂实在是没什么意义. 比较推崇Dapper这样比较简单,效率 ...

  8. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  9. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  10. n2n网络穿透内网

    目录 前言 配置 网络拓扑: 公网服务器的配置 公司电脑的配置 家里笔记本的配置 注意事项 使用n2n网络 n2n的各edge之间传输数据 补充:NAT类型 后记 前言 在家里的时候比较经常需要对公司 ...