选择性使用网站背景图片

最近的一篇文章主题【3】的背景坎坷里写到了背景图片的background-size: cover这个css对移动设备并不怎么友好,无法达到标准的显示效果,于是我一直在想办法使用img标签来填补这个bug,不过今天我又不想做了,所以找了个理由。[接下来就是理由]

如可以正常浏览本站的童鞋们所见,我的div背景大部分都是半透明的,寒假里了解openGL的时候感觉透明处理真心很费神啊[对计算机来说],所以我决定让移动设备就干脆不显示背景图了。这样不仅省去好多渲染步骤,看起来还清爽,顺便间接的帮我解决了移动设备上背景图的撑满问题。

在这最重要的是判断是否为移动设备。博主我比较懒。。所以直接网上找了个

然后在模版里修改相关代码起到上面提到的效果。

在这里我顺便把在手机浏览时可以省掉的js效果也顺便省掉了,比如:

这里是用PHP决定是否显示加载动画时间轮,不显示可以节省很多资源,适合移动设备。

回到正题,现在style.css里把body的background-image样式删掉或注释掉,然后在footer里加入

[花絮]之前由于忘了背景图的url要加url()..所以反复研究了好长时间。。
[这里template_directory_uri是在header里用PHP赋值的一个js变量]

这样就可以让PHP识别出不是移动设备时加上背景图,也就是是移动设备的时候页面没有背景图。

最后别忘了把透明div的背景改成不透明纯色

于是这样一个简洁明了的“移动版”主题就出炉了喵。





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。