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....

时间: 2024-11-05 12:33:55

background-size引发的背景图片不显示的问题的相关文章

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

extjs中新建窗体时,给窗体添加背景图片不显示问题之一

1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: '客户关系管理系统', width: 1024, height: 600, //plain: true, bodyStyle: 'background:url(images/登录背景.jpg);', headerPosition: 'top', layout: 'fit', items: { bor

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

ie8 background背景图片不显示问题

在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !important;

有关background 背景图片不能显示

首先有两个概念 绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如:              ┍ A文件夹           C -|              ┕ B文件夹 绝对路径: C:\A文件夹 相对路径(如果你在B文件夹时): ..\B文件夹  ('..\'向上一级意思) 在实际操作过程中,相对地址和css是内联还是外联有关系的,这个问题在使用绝对地址时不存在. 内联时:{background-image: url(images/new_8.

IE下背景图片 不显示问题

转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情况的朋友可以参考下 很久木有写点什么了,最后干的活比较杂.除了公司里的事情之外,还写了点别的东西. 刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的:

相对路径错误导致背景图片不能显示

昨天写样式的时候,给右边菜单栏设置背景图片,一直没有显示,逐步排除了其他元素干扰,怀疑是路径问题,但是之前也这么写过显示正常,去firebug里面去查看,提示“载入路径失败” background:url(images/navbg.png) no-repeat; 浏览器中显示效果如下 background:url(../images/navbg.png) no-repeat; 浏览器中显示效果如下

css奇特用法之 IMG添加背景图片配合显示--效果惊艳

IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路,我想这种思路可以应用的地方相当多了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">