让你重新认识background的威力! 百倍空间的节省!

4 篇文章 0 订阅

首先我们观察一下这张背景图,如果你是一名合格的前端工程师 你回怎么优化呢?

在这里插入图片描述

  1. 初级前端:当然是拖入 tinypng或者ImageOptin 啦,如果你连这两个都不知道,换份工作啦。
  2. 高级亿 一点的前端:麻烦给我这两者图我并排放在这里插入图片描述
  3. 搞基 高级工程师:麻烦切我两张这样的图,水顺便给我说下背景颜色(扶眼镜)在这里插入图片描述
 width 100vw
 height 100vh
 background url('1.png') repeat, url('2.png') top 10vw left 10vw repeat #FAF2F4
 background-size 20vw 20vw

利用好background的repeat和定位属性就可以解决这种类桌布类型的背景图的优化问题了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值