您好,登录后才能下订单哦!
这篇文章主要介绍“如何用css制作雪碧图”,在日常操作中,相信很多人在如何用css制作雪碧图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用css制作雪碧图”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
这道题实际上考的是前端性能优化的一个点。雪碧图的英文是CSS Sprites。其目的是将多张比较小的图片,合并到一张大的图片上面,大的图片背景透明,使用的时候,通过把该张图片当做背景图片,通过不同的 background-position定位来展示的那部分图片。
降低服务器压力。
减少网络请求,页面渲染更快。
后期维护困难,添加一张图片需要重新制作。
应用麻烦,每一张图都需要计算位置,通过调整位置来展示图片,对误差的要求很严格。
使用图片有局限,只能用在背景图片background-image上,不能用<img>标签来使用。
制作雪碧图
只需要将自己想要的图片上传上去,就可以生成右边的雪碧图了,下载图片,就可以引用了,可以直接复制坐标的css代码来引用图片。下面贴一个完整的例子:
<template>
<div>
<h2>css雪碧图演示</h2>
<ul>
<li v-for="item in moodList" :key="item" :class="item"></li>
</ul>
</div>
</template>
<script>
export default {
name: "cssSprites",
components: {},
data() {
return {
moodList: ['bg-mood_afraid', 'bg-mood_angry', 'bg-mood_calm', 'bg-mood_expect', 'bg-mood_happy', 'bg-mood_miss','bg-mood_nervous', 'bg-mood_sad', 'bg-mood_surprised']
}
},
methods: {
},
computed: {},
created: function () {}
}
</script>
<style>
.cssSprites{
li {
display: inline-block;
}
.bg-mood_afraid {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -10px;
}
.bg-mood_angry {
width: 176px;
height: 176px;
background: url('../assets/img/css_sprites.png') -206px -10px;
}
.bg-mood_calm {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -206px;
}
.bg-mood_expect {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -206px -206px;
}
.bg-mood_happy {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -10px;
}
.bg-mood_miss {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -206px;
}
.bg-mood_nervous {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -402px;
}
.bg-mood_sad {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -206px -402px;
}
.bg-mood_surprised {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -402px;
}
}
</style>
可以看到整个就引用了一张背景图片,减少了网络请求,但一定程度上增加了客户端内存消耗,通过background-position来设置图片的位置,达到显示想要的部分背景图的目的。
雪碧图使用场景
主用在网站的icon上面,很多网站都有很多小图标,这些小图标如果都是单独请求网络,务必会消耗很多玩网络资源(每次请求都会有一个连接与断开的时间消耗),但是比较大的图片,就不建议用雪碧图,因为图片太大,一次请求获取的数据量大,拿到这个大图需要的时间就长,降低了网页的整体体验。
到此,关于“如何用css制作雪碧图”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。