zoukankan      html  css  js  c++  java
  • background-size引发的背景图片不显示的问题

      background-size   这个背景属性在移动开发大家应该都有使用,而且会有一种用得很爽的感觉。今天后台哥突然找我说页面中所有的背景图片显示不了。赶紧拿起手机,开启原生的浏览器打开一看,果然...所有背景图片均显示不了(ps:为什么之前没有发现..因为切页面时是用chorme插件看效果得)。有问题那就要马上验证解决。一番风过雨过后..终于找到原因并解决了。

    引发问题的css背景写法: 

    1 background:url(image url) no-repeat 0 0;
    2 @include background-size(20px 20px) /* sass 写法 */

    使用compass编译之后:

    1 background:url(image url) 0 bottom/10px 45px repeat-x;
    2 -moz-background-size:10px 45px;
    3 -o-background-size:10px 45px;
    4 -webkit-background-size:10px 45px

    悲剧就是这样发生了,background这样简写后,android原生浏览器解析不了:

    1 0 bottom/10px 45px

    我使用的避免办法,使用详细得属性写法:

    background-position: 0 bottom;
    background-repeat: repeat-x;
    background-image: url(image url);
    @include background-size(10px 45px);

    使用compass编译之后:

    1 background-position: 0 bottom;
    2 background-repeat: repeat-x;
    3 background-image: url(image url);
    4 -moz-background-size:10px 45px;
    5 -o-background-size:10px 45px;
    6 -webkit-background-size:10px 45px;
    7 background-size:10px 45px;

    其实这个问题css写法上并不会引发这个问题,主要还是因为compass编译样式后引发的。这种问题时间消耗主要还是在定位问题上,留此一篇,希望不会再有人遇到类似的问题.....end....

     

  • 相关阅读:
    XMPP Openfire集成windows身份认证
    WIF claimsbased identity
    VMWare Workstation使用总结几则
    把成熟的代码从.NET移植到Mono 【转】
    工作流jBPM使用总结
    C++实现的IO高效的算法TPIE
    XMPP的简介和基本概念
    NoSQL学习路线图 使用 NoSQL 数据库分析大规模数据[转]
    Spring Security 3 网站安全授权
    jBPM 5 的点滴
  • 原文地址:https://www.cnblogs.com/hubli/p/4195898.html
Copyright © 2011-2022 走看看