移动开发，背景图片的处理问题

来源：互联网发布：dota2 数据bld是什么编辑：程序博客网时间：2024/06/03 15:39

关于移动端开发“背景图片的处理”问题

一般在开发过程中，背景图片都是以当成背景的方式，用CSS语法引入到页面中的；

width:100%;heihgt:100%;background:url(./images/Activity/banner.png)no-repeat;);background-size: 100% auto;

上述的这种方式，只能是在网页内容比较多的情况下；

例如：http://127.0.0.1/jr1/TT/weixin/card_share1;

但是当页面内容较少，或者是只有一张图片的情况下，上述的这种方式是不能解决问题的。例如：http://127.0.0.1/jr1/TT/wish/sky;

所以，可以尝试用下面的这几个方法：
1.仅水平方向平铺：
<body style="background-image : url(image.gif);background-repeat : repeat-x;">
2、仅垂直方向平铺：
<body style="background-image : url(image.gif);background-repeat : repeat-y;">
3、不平铺：
<body style="background-image : url(image.gif);background-repeat : no-repeat;">

4.把背景图片当成一张图片写入html页面中，设置其所在层的高度；当然这样写，在页面底部会有一条留白；解决办法：在<html style=”height:100%;overflow:hidden;”>就OK了。

</div>

$(function(){

$('#background').height($(window).height());

$('#background').width($(window).width());

});

</script>

1 0