当img要当背景的时候,img和backgrond-image如何选择?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
1、你 img 或者 background-image 其中某一个是否需要另做它用,如果是的话,你只能选择另外一个。
2、如果你图片本身比较大,且可能出在页面较高位置时(也就是用户无需滚动的第一屏就能看到的位置),如果你使用了背景图的方式加载的话则可能会有那么几秒时间用户页面上显示的一块空白,这可能会非常难看。比较好的方式是,你用 img 的方式嵌入图片,而在背景上写入一个跟嵌入图片主色调一致(或与页面和谐)的背景色,这样在用户第一次加载或低网速加载时,可以先显示跟页面整体和谐的背景色,然后再出现嵌入图片的方式。
ps1.关于第二种情况,我曾经在苹果官网看到类似处理,当时那个嵌入图片是一个中心放射状的造型。所以苹果在背景图(颜色)上还使用了与图片构图接近的渐变背景色。
ps2.我偶尔也将第二种情况用于没有整体解决方案,适配 retina 屏的快捷方式,简单的说就是,background-image 是一个 @1x 的图片,而 @2x 的图片放置在 img 里,按需加载。