老师说的这个base64才能引入html么

老师说的这个base64才能引入html么

我平时用的图片好像都是随便网上下载也能用啊 什么jpg png这些  这个为什么要转base64 base64是什么?和原来我用的网上图片直接引入html的jpg 和png有什么区别

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好,解答如下:

1、转换为Base64,网址http://tool.chinaz.com/tools/imgtobase/,上传图片即可转换

http://img1.sycdn.imooc.com//climg/5f4b88f909ebe07710740208.jpg

2、引入图片之后,使用background-position调整位置,以要显示第三个图标为例(调整的位置可能不准确,同学可以按照自己的图片,使用ps测量得出数值)

http://img1.sycdn.imooc.com//climg/5f4b8a2e09103c5908010432.jpg

效果:

http://img1.sycdn.imooc.com//climg/5f4b8a5b09ae63d800610061.jpg

图片相对于div向上移动,才能显示对应的图片,因此为负值

http://img1.sycdn.imooc.com//climg/5f4b8b450925fd1003610444.jpg

祝学习愉快~

好帮手慕言 2020-08-30 14:25:46

同学你好,解答如下:

1、Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。区别:使用Base64占用内存小,会减少http请求。

2、是图片路径中所带的数字

http://img1.sycdn.imooc.com//climg/5f4b435a0925c1aa07530315.jpg

3、引入这张大图作为背景图之后,假如想要显示第三个图标,就要结合背景定位移动背景图的位置,即background-position ,属性值是根据是第三个图标在雪碧图的位置来定 :

也就是第三个图标距离雪碧图左边和上边的位置 , 同学可以使用ps测量一下写入 

http://img1.sycdn.imooc.com//climg/5f4b45c309812ba400430153.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 陈立天 #1
    我知道是要用background-position 和雪碧图 就是不知道怎么用啊。。
    2020-08-30 17:34:25
  • 提问者 陈立天 #2
    老师能不能具体一点啊
    2020-08-30 17:34:39
  • 提问者 陈立天 #3
    老师也没说怎么把图片转成Base64
    2020-08-30 17:35:56
提问者 陈立天 2020-08-30 11:05:24

另外那个雪碧图要怎么用 background里面的position怎么定位到相应的图片和大小

http://img1.sycdn.imooc.com//climg/5f4b1768092d678f03560835.jpg

提问者 陈立天 2020-08-30 11:03:51

还有老师搜索的595是什么意思 

http://img1.sycdn.imooc.com//climg/5f4b170c097f2ef913760972.jpg

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师