码迷,mamicode.com
首页 > 其他好文 > 详细

关于实现页面以一张图片为背景,且背景不变形的效果

时间:2015-05-03 23:37:48      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

主要是实现类似百度首页的皮肤,改变浏览器窗口大小,图片按照比例缩放,不变形的效果。
1. html部分
<!-- 背景图片-begin -->
    <div class="login-bg">
        <img src="images/bg.png" id="login_bg" />
    </div>
    <!-- 背景图片-end -->
 
 <!-- 用空白的图片来挡住大图片-begin -->
    <div class="login-bg-blank"></div>
 <!-- 用空白的图片来挡住大图片-end -->
 
2. css的部分
.login-bg {
   position:absolute;
   top:0px;
   left:0px;
   margin:0px auto;
   overflow:hidden;
   z-index:-2;
   width:100%;
   height:100%;
}
 
.login-bg img {
   width: 100%;
}
 
.login-bg-blank {
   position:absolute;
   top:0px;
   left:0px;
   overflow:hidden;
   margin:0px auto;
   width:100%;
   height:100%;
   background:url("../images/blank.gif");
}
 
3. js的部分
// 改变背景图片的宽高比
function resizeImg() {
 
 // 该图片的宽高比
 var scale = 1280 / 800;
    var w = $(window).width(),
        h = $(window).height();
 
    if(w / h > scale){
        $("#login_bg").css({width: ‘100%‘, height: ‘auto‘});
    } else {
        $("#login_bg").css({width: ‘auto‘, height: ‘100%‘});
    }
};

关于实现页面以一张图片为背景,且背景不变形的效果

标签:

原文地址:http://www.cnblogs.com/pijiaxiang/p/4474907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!