zoukankan      html  css  js  c++  java
  • 网页背景图片拉伸

    解决方法有两种:

    一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是可以使用微软的滤镜效果,但是IE6不支持。

    body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 

    另一种是使用jQuery,在body中动态插入一个div,然后在div里包含一张图片,浏览器窗口改变大小时,动态设置背景图片的尺寸。

    $(function(){ 
        $("body").append("<div id='main_bg' style="position:absolute;"/>"); 
        $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); 
        cover(); 
        $(window).resize(function(){ //浏览器窗口变化 
            cover(); 
        }); 
    }); 
    function cover(){ 
        var win_width = $(window).width(); 
        var win_height = $(window).height(); 
        $("#bigpic").attr({win_width,height:win_height}); 
    } 
  • 相关阅读:
    应用程序跳转
    百度地图集成
    导航 -MapKit
    导航
    定位
    ApexSql Log使用体会
    Oracle学习 第16天
    上来冒个泡吧
    Oracle学习 实战心得总结
    好久没上来冒个泡了,整整一个半月
  • 原文地址:https://www.cnblogs.com/sydeveloper/p/3754230.html
Copyright © 2011-2022 走看看