前端css基础知识点之sprite—

前端css基础知识点之sprite——雪碧（精灵）

css sprite css精灵或css雪碧

把网页中一些背景图片整合到一个大文件中，然后利用

background-image、background-repeat、background-position

组合进行背景定位，适用于小图标

优点

减少网页的http请求,从而提高页面的性能

图片命名更容易

更换风格方便

缺点

必须限定容器大小符合背景图元素位置

/*代码写法*/
.box {width: 48px;height: 48px;background: url(tb.png) no-repeat 0 -120px;
}

前端css基础知识点之sprite——雪碧（精灵）相关推荐

前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
前端CSS基础之案例--图片
用<前端CSS基础>文章里的内容完成一个图片案例效果展示: 代码实现: <!DOCTYPE html> <html lang="en"> &l ...
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
文章目录前言 ~ 雪碧图一.页面效果展示二.代码实现解析三.完整代码前言 ~ 雪碧图雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
CSS Sprite——雪碧图
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backg ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

前端css基础知识点之sprite——雪碧（精灵）

前端css基础知识点之sprite——雪碧（精灵）

前端css基础知识点之sprite——雪碧（精灵）相关推荐

最新文章

热门文章