相同点:background 与 background-image都可以用于设置背景图
区别. background既可以用于设置背景图, 又可以用于设置CSS样式,还可以用于设置背景属性。 background-image只能用于设置背景图
background能设置的背景属性,如下:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
svg和icon-font的区别:
1.icon-font用文字渲染,只支持单色。相对简单。
2.svg支持多色,不失真。制作相对难一点。
京东: logo是用png作为background。小图标有用图片也有用svg或者icon-font。
淘宝: logo是用png作为background。小图标都是用icon-font。淘宝有自己的icon-font库。没有找到用svg的,可能觉得用icon-font就足够了。
优酷: logo是用png作为background。小图标用svg。
爱奇艺: logo是用svg作为background。小图标用svg做background。
抖音:为文内增加标题,这里将生成目录 logo是用svg作为background。小图标有用svg和精灵图做background。
bilibili: logo是用svg,非background。小图标都是svg,不管是不是多色。
王者荣耀: logo是用png作为background。小图标用精灵图做背景。
微软: logo直接img加png图片。小图标svg。
MDN: logo是用svg,非background,小图标用icon-font。
亚马逊: logo用精灵图做backg为文内增加标题,这里将生成目录round,小图标也是。
油管: logo是用svg做的,而且logo都有自己专门的html标签,并不是作为background。icon也是用svg做的。