四时宝库

程序员的知识宝库

SVG sprite——新的前端图标解决方案

我们在开发前端页面应用的时候,常常要用到一些小图标,比如首页、上传、位置、电话、分享,购物车等各式各样的图标。如果每个图标都发送一次http请求的话,这会较大的影响前端性能。通常会将所有图标整合到一起,只占用一个http请求。整合的方式有CSS sprite和iconfont。

CSS sprite的原理其实很简单,就是把所有用到的图标拼接到同一张png图片里,给图标元素设置背景图片,并通过CSS调整元素的background-position属性,使同一张背景图的不同部位在不同的元素中展现。要注意的是,元素的background-size设置的值应该和元素的大小成一定的倍数关系。比如设置了图标元素的宽高是40px,而png里每个图标的大小是80*80,这时候background-size应该是"50% auto"。为什么我们在合并图标的时候要做大一点呢?因为在手机上用,而手机通常是2倍屏、2.5倍屏,甚至3倍屏,按照一定的比例做大一点,这样在手机上用才不会发虚。

CSS精灵图技术(提高页面的加载速度)

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

志同道合的小伙伴跟我一起学习交流哦!

第二阶段 CSS3

18 CSS精灵技术

前端进阶高薪必看-CSS篇(前端css是什么意思)

中1, 2, 3, 4 表示优先级

CSS 选择器及其优先级

「技术分享」从页面加载到数据请求,前端页面性能优化实践分享

背景

做过前端开发都知道前端的工作内容是很多的,对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能,我们需要对各种资源内容进行不同方面的优化。

对用户而言,优化可以让应用的响应速度加快,加载更加迅速,可以带来更好的使用体验。

CSS对比 background-image 与 object-fit

在小程序开发中,image组件有一个mode属性可以让我们灵活的操作图片的显示,那么在H5开发中,我们又该如何呢?

H5 开发中,对于图片的显示可以通过 img 标签的方式或者设置

零基础教你学前端——73、CSS精灵图

我们学习CSS背景的应用——CSS 精灵图。

记一次 css background-position 遇到的坑

background-position , 一看名字就是设置背景位置的,第一反应就是和 position 差不多,然而设置了 left 和 top 却没有和我预想的一样,总是调不到想要的位置。

前端设计-JavaScript简单数字时钟开发实例

借助于JavaScript window对象所提供的计时触发函数setInterval可以实现前端动画效果的设计与制作。本例主要以setInterval方法为基础介绍简单数字时钟的开发实例。


所需素材

本数字时钟设计实现格式为00:00:00类型结构的数字时钟,因此需要准备时钟显示相关数字及间隔符号的素材。最终实现效果如下所示:

使用样式处理图片自适应的两种方式,特别推荐使用第二种

点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

关于用样式来处理图片自适应的问题,下面分析一下两种法。

方法一,背景图

有一个做法,大家都很熟悉,图片作为div的背景。然后,应用background-size和background-position这两属性,就能很方便地按比例来缩放。

5.25秒变0.023秒:小程序图片优化全攻略

本文首发于lonjin个人博客

往期精彩:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接