雪碧（精灵）图

要求显示效果：（轮播图导航栏效果）

页面结构：

<ul class="list-box"><li></li><li></li><li></li><li></li><li></li>
</ul>

样式：

.list-box>li{float: left;width: 70px;height: 65px;background-image: url(./img/daohang.png);background-position:0 0;background-repeat: no-repeat;
}
.list-box>li:nth-child(2){background-position-x: -100px;
}
.list-box>li:nth-child(3){background-position-x: -210px;
}
.list-box>li:nth-child(4){background-position-x: -310px;
}
.list-box>li:nth-child(5){background-position-x: -395px;
}.list-box>li:hover{background-position-y: -110px;
}

实现原理：每个li背景图都为同一张，对应li给一个宽高width: 70px;height: 165px;先显示第一行，在不设置background-position-x时，默认显示第一行图片。
相当于每个背景图都是叠着放置的：

故：移动背景图片background-position-x即可改变对应可视区域的图像。

DaZeng：雪碧图（精灵图）的使用相关推荐

PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
雪碧图以及渐变色
今天学习了雪碧图和渐变色的知识 1. <style> a{ display: block; width: 470px; height: 497px; background-image: u ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
less、字体图标、精灵图笔记
less css预编译工具文件 .less 使用less书写css,把less编译成css文件需要使用vscode的Easy LESS插件 1. 如何使用不可导出的less文件,如base.les ...
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
CSS高级一.精灵图二.字体图标字体图标的优点: 这里附一下阿里的字体图标使用方法: 三.三角形制作四.一些样式 1.用户界面鼠标样式cursor 2.轮廓线outline 3.防止拖拽文本域 ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值问题很明显, ...

DaZeng：雪碧图（精灵图）的使用

雪碧（精灵）图

DaZeng：雪碧图（精灵图）的使用相关推荐

最新文章

热门文章