CSS 图像高级 Css Sprites
上节课中我们学习了背景图像,这节课我们学习背景图像的高级知识,如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
>
<
div
class
=
"one"
></
div
>
<
div
class
=
"two"
></
div
>
</
body
>
</
html
>
background-position 属性有两个值,第一值表示水平位置,正值表示往前,负值表示往后。第二个表示垂直位置,正值表示往上,负值表示往下。
background-position 属性值需要慢慢调整,细心+耐心就能做好。
盒子大小背景图像大小可以调整。这里我们使用默认的大小。
计算结果GIF动画:
CSS 图像高级 Css Sprites的更多相关文章
- CSS 图像高级 CSS 渐变
CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...
- CSS 图像高级 径向渐变
径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- css 图像热区
CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- CSS 图像大小
CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...
- CSS 图像
CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...
随机推荐
- ES6模板字符串【${}配合反单引号一起用】
先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...
- TCP/IP 通信
TCP/IP 通信又叫socket 通信,是基于TCP/IP协调面向连接的一个数据传输技术.是属于OSI国际标准的传输层,三次握手 提供数据,有序,安全,端到端的传输和接收.它有三个主要协议:传输控制 ...
- MVC5 方法扩展
public static MvcHtmlString DataDictionaryDropDownList(this HtmlHelper htmlHelper, string name, obje ...
- Win10 使用MinGW-w64编译Tesseract4.0
一开始尝试使用mingw+msys编译tesseract, 但是苦于mingw-get安装的软件版本都太旧,要安装新版本只能下载源码编译安装. 在编译过程中遇到了很多麻烦,最后还遇到了包直接循环依赖问 ...
- vue 路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 开源邮件系统Zimbra Collaboration – Open Source Edition
https://www.zimbra.com/downloads/zimbra-collaboration-open-source/ Zimbra Collaboration – Open Sourc ...
- dll导出函数的两种方式的比较
最初的网页链接已经挂了, 在此贴一个中间的转载链接 https://blog.csdn.net/zhazhiqiang/article/details/51577523 一 概要 vs中导出 dll的 ...
- hdfs知识点《转》
HDFS知识点总结 学习完Hadoop权威指南有一段时间了,现在再回顾和总结一下HDFS的知识点. 1.HDFS的设计 HDFS是什么:HDFS即Hadoop分布式文件系统(Hadoop Dist ...
- JAVA除法保留小数点后两位的两种方法
1.(double) (Math.round(sd3*10000)/10000.0); 这样为保持4位 (double) (Math.round(sd3*100)/100.0); 这样为保持2位 ...
- idea springboot 父子工程 子工程maven不自动import
父工程删除对spring boot启动项的引用,因为父工程 dependencyManagement,它不会自动加载包,只指定包的版本, 如果在父工程中引用了包,但是没有指定包版本,子工程将不会识别到 ...