一个控制背景的显示公共方法 包括对ie的兼容性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个控制背景的显示公共方法 包括对ie的兼容性相关的知识，希望对你有一定的参考价值。
var ww;
var wh;
var ieVer=IEVersion();
var chVer=ChromeVersion();
var browserType=browser();
var expandNav=false;
//让IE8支持forEach
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
function resize(first){
ww=$(window).width();
wh=$(window).height();
var $body=$(‘body‘);
$body.css({
‘height‘:wh+‘px‘
});
var headerHeight=(ww>720)?60:46;
$(‘#container‘).css(‘height‘,(($body.height()-headerHeight)+‘px‘));
$(‘#bg‘).css(‘height‘,(($body.height()-headerHeight)+‘px‘));
var $nav=$(‘nav‘);
var $sm=$(‘.sub-menu-div‘);
if(ww<=720){
$nav.css(‘height‘,Math.max(($body.height()-headerHeight),355)+‘px‘);
$sm.stop().show();
$nav.stop().hide();
}else{
$sm.stop().hide();
$nav.stop().show();
}
resizeHook(first);
}
$(function(){
resize(true);
$(window).resize(function() {
resize();
setTimeout(resize,500);
}).load(function(){
resize();
setTimeout(resize,500);
});
$(‘.has-sub-menu‘).mouseover(function () {
if(ww>720) {
var $sm = $(this).children(‘.sub-menu-div‘);
$sm.stop().fadeIn();
}
}).mouseleave(function () {
if(ww>720) {
var $sm = $(this).children(‘.sub-menu-div‘);
$sm.stop().fadeOut();
}
});
$(‘.nav-button‘).click(function(){
if(!expandNav){
$(‘nav‘).stop().slideDown();
if(ltIE9()){
var $img=$(‘#right_button>img‘);
$img.fadeOut(300,null,function(){
$img.attr(‘src‘,getImgUrl(‘hanburger-button-close‘)).fadeIn(300);
});
}else{
$(‘.menu-button‘).addClass(‘menuhover‘);
}
}else{
$(‘nav‘).stop().slideUp();
if(ltIE9()){
var $img=$(‘#right_button>img‘);
$img.fadeOut(300,null,function(){
$img.attr(‘src‘,getImgUrl(‘hanburger-button‘)).fadeIn(300);
});
}else {
$(‘.menu-button‘).removeClass(‘menuhover‘);
}
}
expandNav=!expandNav;
});
if(noSVG()){
$(‘#logo‘).attr(‘src‘,getImgUrl(‘header_logo‘));
$(‘#logo_description‘).attr(‘src‘,getImgUrl(‘header_description‘));
}
if(ltIE9()){
$(‘#right_button‘).html(‘<img style="display: block" src="‘+getImgUrl(‘hanburger-button‘)+‘" border=0 ondragstart="return false;"/>‘);
}
if(ltIE9() || browserType==‘Safari‘){
var fontArr=[‘xi‘,‘zhengcu‘,‘putong‘];
fontArr.forEach(function(e){
$(‘.font-‘+e).removeClass(‘font-‘+e).addClass(‘font-native-‘+e);
});
}
});
function resizeHook(first){}
//判断浏览器版本是否低于IE9
function ltIE9(){
return ieVer && ieVer<9;
}
//查询IE浏览器版本
function IEVersion(userAgent){
var UA = userAgent || navigator.userAgent;
if(/msie/i.test(UA)){
return UA.match(/msie (\d+\.\d+)/i)[1]*1;
}else if(~UA.toLowerCase().indexOf(‘trident‘) && ~UA.indexOf(‘rv‘)){
return UA.match(/rv:(\d+\.\d+)/)[1]*1;
}
return false;
}
//查询Chrome浏览器大版本
function ChromeVersion(){
if(browser()!=‘Chrome‘){
return false;
}
var agent = navigator.userAgent.toLowerCase() ;
var regStr_chrome = /chrome\/[\d.]+/gi ;
var info=(agent.match(regStr_chrome)+"").replace(/[^0-9.]/ig,"");
return /^([0-9]+)\./.exec(info)[1]*1;
}
//判断浏览器种类
function browser(){
if (!!window.ActiveXObject || "ActiveXObject" in window)
return "IE";//判断是否IE浏览器
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
} //判断是否Opera浏览器
if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} //判断是否Edge浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
if(userAgent.indexOf("Windows") > -1){
return "Safari for Win";
}
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
} //判断是否IE浏览器
}
//判断是否不支持SVG
function noSVG(){
return ltIE9() || browserType==‘Safari for Win‘ || (chVer && chVer<31);
}
function getImgUrl(token) {
var urls = {
"hanburger-button-close": "img/hanburger-button-close.png",
"hanburger-button": "img/hanburger-button.png",
"header_logo": "img/header_logo.png",
"header_description": "img/header_description.png",
};
return $(‘.at-level-1‘).length>0 ? urls[token] : ‘../‘ + urls[token];
}
function resizeHook(){
if(ww<=720){
var $bf=$(‘#bg-float‘);
$bf.css(‘width‘,ww+‘px‘);
var bf_height=ww/720*534;
if(wh>$bf.offset().top+bf_height){
$bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘);
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta content="always" name="referrer">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>关于凯京 - 凯京集团</title>
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/hamburger.css">
<link rel="stylesheet" href="../css/about-yudian.css">
<!--[if lt IE 9]>
<script src="../js/respond.min.js"></script>
<script src="../js/html5shiv.min.js"></script>
<![endif]-->
<script src="../js/prefixfree.min.js"></script>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<header class="limit-parent-header at-level-2">
<div class="limit-header">
<a href="../index.html"><img id="logo" src="../img/header_logo.svg" border=0 ondragstart="return false;"></a>
<img id="logo_description" src="../img/header_description.svg" ondragstart="return false;">
<div id="right_button" class="nav-button">
<section class="mod model-1">
<div class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
</div>
</section>
</div>
<nav class="font-xi">
<ul class="menu">
<li class="menu-item"><a href="../index.html">首页</a></li>
<li class="menu-item active-li"><a class="active-a" href="about-yudian.html">关于凯京</a></li>
<li class="menu-item has-sub-menu"><a href="group-business.html">集团板块</a>
<div class="sub-menu-div">
<div class="sub-menu-arrow"></div>
<ul class="sub-menu">
<li class="sub-menu-item"><a href="chuangpu.html">商业保理</a></li>
<li class="sub-menu-item has-top-line"><a href="kaijing.html">融资租赁</a></li>
<li class="sub-menu-item has-top-line"><a href="luchang.html">信息科技</a></li>
</ul>
</div>
</li>
<li class="menu-item last-menu-item"><a href="contact.html">联系我们</a></li>
<li class="menu-item new-menu-item"><a href="http://cloud.keking.cn" target="_blank">商户登录</a></li>
</ul>
</nav>
<div class="clearer"></div>
</div>
</header>
<div id="bg"></div>
<div id="container" class="limit-parent-article">
<article class="limit-article">
<p class="title font-zhengcu">凯京集团是什么？</p>
<div class="content font-putong">
<p>上海凯京信达科技集团有限公司（“凯京集团”），2015年成立于上海陆家嘴，专注为中小微企业和个人提供各类场景下的信贷服务，产品包括商业保理业务、融资租赁业务、供应链金融、大数据征信等。</p>
<p>公司2015年获得知名投资机构数千万元人民币天使轮投资，2016年2月获得<b class="font-zhengcu">红杉资本</b>领投的1亿元人民币A轮投资，2016年12月获得由<b class="font-zhengcu">中航信托</b>领投、<b class="font-zhengcu">红杉资本</b>、<b class="font-zhengcu">复朴资本</b>跟投的2亿人民币B轮融资。</p>
<p>我们的使命：数据重构物流</p>
<p>我们的愿景：最具价值的数据科技企业</p>
</div>
</article>
<img id="bg-float" src="../img/about_yudian_bg_float_mobile.png" ondragstart="return false;">
</div>
<script src="../js/public.js"></script>
<script src="../js/about-yudian.js"></script>
<!--[if lt IE 9]>
<script src="../js/rem.min.js"></script>
<![endif]-->
</body>
</html>
about-yudian.css
/*# sourceURL=../css/about-yudian.css */
/*@ sourceURL=../css/about-yudian.css */
#bg{
background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg");
background-position: 50% 100%;
background-size: cover;
-ms-behavior: url("../js/backgroundsize.min.htc");
}
#bg-float{
display: none;
}
.content{
font-size: 1rem;
color: #444444;
margin-top: 60px;
line-height: 2.0rem;
font-weight: 400;
letter-spacing: 0.05rem;
text-align: justify;
}
.content>p{
margin: 0.5rem 0;
}
b{
font-size: 1.2rem;
}
@media (max-height: 750px) and (min-width: 721px) {
#bg {
background-position: 50% 70%;
}
}
@media (max-width: 720px) {
#bg {
background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg");
background-position: 50% 100%;
background-size: cover;
-ms-behavior: url("../js/backgroundsize.min.htc");
}
#bg-float{
display: block;
margin-left: -40px;
}
.content{
font-size: 1rem;
color: #444444;
margin-top: 36px;
line-height: 1.8rem;
}
}
hamburgur.css
/*# sourceURL=../css/about-yudian.css */
/*@ sourceURL=../css/about-yudian.css */
#bg{
background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg");
background-position: 50% 100%;
background-size: cover;
-ms-behavior: url("../js/backgroundsize.min.htc");
}
#bg-float{
display: none;
}
.content{
font-size: 1rem;
color: #444444;
margin-top: 60px;
line-height: 2.0rem;
font-weight: 400;
letter-spacing: 0.05rem;
text-align: justify;
}
.content>p{
margin: 0.5rem 0;
}
b{
font-size: 1.2rem;
}
@media (max-height: 750px) and (min-width: 721px) {
#bg {
background-position: 50% 70%;
}
}
@media (max-width: 720px) {
#bg {
background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg");
background-position: 50% 100%;
background-size: cover;
-ms-behavior: url("../js/backgroundsize.min.htc");
}
#bg-float{
display: block;
margin-left: -40px;
}
.content{
font-size: 1rem;
color: #444444;
margin-top: 36px;
line-height: 1.8rem;
}
}
public.css
/*# sourceURL=../css/public.css */
/*@ sourceURL=../css/public.css */
*{
transition: 0.3s;
}
html{
font-family: ‘PingFang SC‘,‘Helvetica Neue‘,Helvetica,‘Hiragino Sans GB‘,STHeitiSC-Light,‘Microsoft YaHei‘,Arial,sans-serif;
font-size: 16px;
}
body {
margin: 0;
overflow: hidden;
}
a{
text-decoration: none;
}
header {
height: 60px;
background-color: #283e56;
user-select: none;
z-index: 100;
}
.font-xi, .font-native-xi{
font-weight: 300;
}
.font-zhengcu, .font-native-zhengcu{
font-weight: 900;
}
.limit-header{
display: inline-block;
position: relative;
text-align: left;
transition: none;
width: 1000px;
}
.limit-article{
display: inline-block;
position: relative;
text-align: left;
width: 900px;
transition: none;
}
.limit-parent-header{
text-align: center;
transition: none;
}
.limit-parent-article{
text-align: center;
transition: none;
}
#logo{
margin-top: 18px;
height: 24px;
transition: none;
}
#logo_description{
position: relative;
top: -4px;
margin-left: 10px;
height: 12px;
transition: none;
}
.clearer{
clear: both;
}
#right_button {
display: none;
}
header nav{
position: absolute;
top: 0;
right: 0;
}
.menu,.sub-menu{
padding: 0;
margin: 0;
}
.menu-item{
position: relative;
float: left;
background-color: #283e56;
list-style: none;
text-align: center;
overflow: visible;
}
.menu-item>a{
display: inline-block;
width: 90px;
height: 60px;
line-height: 60px;
color: white;
text-decoration: none;
font-size: 0.8rem;
}
.menu-item>a:hover,.menu-item>a.active-a{
color: rgba(255,255,255,0.7);
}
.menu-item.active-li{
background-color: #1A2B44;
color: rgba(255,255,255,0.7);
}
.sub-menu-div{
display: none;
position: absolute;
z-index: 100;
width: 135px;
left: -22.5px;
transition: none;
}
.sub-menu-arrow{
width:0;
height:0;
border-width:8px;
border-style:dashed dashed solid;
border-color:transparent transparent #283e56;
font-size:0;
line-height:0;
margin: 0 auto;
}
.sub-menu-item{
list-style: none;
background-color: #283e56;
}
.sub-menu-item>a{
display: inline-block;
line-height: 30px;
color: white;
text-decoration: none;
font-size: 0.7rem;
font-weight: 300;
width: 100%;
height: 30px;
}
.sub-menu-item>a:hover{
color: rgba(255,255,255,0.7);
}
.has-top-line{
border-top: 0.5px solid #607284;
}
#bg{
position: absolute;
width: 100%;
top:60px;
left:0;
transition: none;
z-index: -999;
opacity: 0.9;
}
#container{
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
transition: none;
}
.title{
font-size: 2.2rem;
font-weight: bold;
text-align: center;
color: #555555;
margin-top: 90px;
letter-spacing: 0.1rem;
}
.footer-holder{
height: 40px;
}
/*@media (max-width: 1000px) and (min-width: 801px) {*/
/*.limit-header{*/
/*width: 700px;*/
/*}*/
/*.limit-article{*/
/*width: 700px;*/
/*}*/
/*}*/
@media (max-width:1024px) and (min-width: 721px) {
.limit-header{
width: 700px;
}
#logo{
width:230px;
}
.limit-article{
width: 700px;
}
}
@media (max-height: 750px) and (min-width: 721px) {
.title{
margin-top: 60px;
}
}
@media (max-width: 720px) {
.limit-header{
position: relative;
text-align: left;
display: block;
width: auto;
}
.limit-article{
display: inline-block;
position: relative;
text-align: left;
max-width: 900px;
width: auto;
}
.limit-parent-header{
padding:0 15px;
text-align: center;
}
.limit-parent-article{
padding:0 40px;
text-align: center;
}
header {
height: 46px;
}
#logo{
margin-top: 15px;
height: 16px;
}
#logo_description{
position: relative;
top: -3px;
margin-left: 6px;
height: 9px;
}
#right_button {
display: block;
float: right;
width: 28px;
height: 28px;
margin-top: 9px;
cursor: pointer;
}
header nav{
position: absolute;
top: 46px;
left: 0;
z-index: 100;
margin: 0 -15px;
background-color: #283e56;
display: none;
transition: none;
padding-top: 20px;
}
.menu{
margin: 0 40px;
}
.sub-menu{
margin: 0;
}
.menu-item{
float: none;
position: relative;
background-color: #283e56;
text-align: left;
font-weight: bold;
}
.menu-item>a{
display: block;
width: 100%;
height: 45px;
line-height: 45px;
border-bottom: 0.5px solid #a9b2bb;
}
.menu-item>a:hover,.menu-item>a.active-a,.sub-menu-item>a.active-a{
color: rgba(255,255,255,0.7);
}
.menu-item.active-li{
background-color: #283e56;
color: rgba(255,255,255,0.7);
}
.sub-menu-div{
display: block;
position: relative;
width: 100%;
left: 0;
}
.sub-menu-arrow{
display: none;
}
.sub-menu-item{
list-style: none;
background-color: #283e56;
}
.sub-menu-item>a{
display: block;
line-height: 45px;
font-size: 0.8rem;
height: 45px;
border-bottom: 0.5px solid #a9b2bb;
padding-left: 60px;
}
.sub-menu-item>a:hover{
color: rgba(255,255,255,0.7);
}
.has-top-line{
border-top: none;
}
.last-menu-item a{
border-bottom: 1.5px solid white;
}
.new-menu-item{
display: none;
}
#bg{
top:46px;
}
.title{
font-size: 1.6rem;
font-weight: bold;
text-align: center;
color: #333333;
margin-top: 40px;
}
}
#logo_description{
display: none;
}
插件
prefiexfree.min
/**
* StyleFix 1.0.3 & PrefixFree 1.0.7
* @author Lea Verou
* MIT license
*/
(function(){function m(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){var b=a.href||a.getAttribute("data-href");try{if(!b||"stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(p){return}var d=b.replace(/[^\/]+$/,""),f=(/^[a-z]{3,10}:/.exec(d)||[""])[0],h=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],k=/^([^?]*)\??/.exec(b)[1],g=a.parentNode,c=new XMLHttpRequest,l;c.onreadystatechange=function(){4===c.readyState&&
l()};l=function(){var b=c.responseText;if(b&&a.parentNode&&(!c.status||400>c.status||600<c.status)){if((b=e.fix(b,!0,a))&&d)var b=b.replace(/url\(\s*?((?:"|‘)?)(.+?)\1\s*?\)/gi,function(b,a,c){return/^([a-z]{3,10}:|#)/i.test(c)?b:/^\/\//.test(c)?‘url("‘+f+c+‘")‘:/^\//.test(c)?‘url("‘+h+c+‘")‘:/^\?/.test(c)?‘url("‘+k+c+‘")‘:‘url("‘+d+c+‘")‘}),n=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"),b=b.replace(RegExp("\\b(behavior:\\s*?url\\(‘?\"?)"+n,"gi"),"$1");n=document.createElement("style");n.textContent=
"/*# sourceURL="+a.getAttribute("href")+" */\n/*@ sourceURL="+a.getAttribute("href")+" */\n"+b;n.media=a.media;n.disabled=a.disabled;n.setAttribute("data-href",a.getAttribute("href"));a.id&&(n.id=a.id);g.insertBefore(n,a);g.removeChild(a);n.media=a.media}};try{c.open("GET",b),c.send(null)}catch(p){"undefined"!=typeof XDomainRequest&&(c=new XDomainRequest,c.onerror=c.onprogress=function(){},c.onload=l,c.open("GET",b),c.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b=
a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){m(‘link[rel="stylesheet"]:not([data-inprogress])‘).forEach(StyleFix.link);m("style").forEach(StyleFix.styleElement);m("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b,d){if(e.fixers)for(var f=0;f<e.fixers.length;f++)a=
e.fixers[f](a,b,d)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(b){return"-"+b.toLowerCase()})}};(function(){setTimeout(function(){m(‘link[rel="stylesheet"]‘).forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(m){function e(b,d,f,h,k){b=a[b];b.length&&(b=RegExp(d+"("+b.join("|")+")"+f,"gi"),k=k.replace(b,h));return k}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,d,f){var h=a.prefix;-1<a.functions.indexOf("linear-gradient")&&(b=b.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(b,a,d,f){return a+(d||"")+"linear-gradient("+(90-f)+"deg"}));b=e("functions","(\\s|:|,)","\\s*\\(","$1"+h+"$2(",b);b=e("keywords","(\\s|:)","(\\s|;|\\}|$)",
"$1"+h+"$2$3",b);b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+h+"$2:",b);if(a.properties.length){var k=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi");b=e("valueProperties","\\b",":(.+?);",function(a){return a.replace(k,h+"$1")},b)}d&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+h+"$1",b));b=b.replace(RegExp("-"+h,"g"),"-");return b=b.replace(/-\*-(?=[a-z]+)/gi,a.prefix)},property:function(b){return(0<=a.properties.indexOf(b)?a.prefix:"")+b},value:function(b,d){b=
e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b);0<=a.valueProperties.indexOf(d)&&(b=e("properties","(^|\\s|,)","($|\\s|,)","$1"+a.prefix+"$2$3",b));return b},prefixSelector:function(b){return a.selectorMap[b]||b},prefixProperty:function(b,d){var f=a.prefix+b;return d?StyleFix.camelCase(f):f}};(function(){var b={},d=[],f=getComputedStyle(document.documentElement,null),h=document.createElement("div").style,k=function(a){if("-"===
a.charAt(0)){d.push(a);a=a.split("-");var c=a[1];for(b[c]=++b[c]||1;3<a.length;)a.pop(),c=a.join("-"),StyleFix.camelCase(c)in h&&-1===d.indexOf(c)&&d.push(c)}};if(f&&0<f.length)for(var g=0;g<f.length;g++)k(f[g]);else for(var c in f)k(StyleFix.deCamelCase(c));var g=0,e,p;for(p in b)f=b[p],g<f&&(e=p,g=f);a.prefix="-"+e+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<d.length;g++)c=d[g],0===c.indexOf(a.prefix)&&(e=c.slice(a.prefix.length),StyleFix.camelCase(e)in h||a.properties.push(e));
!("Ms"!=a.Prefix||"transform"in h||"MsTransform"in h)&&"msTransform"in h&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var d={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};d["repeating-linear-gradient"]=d["repeating-radial-gradient"]=
d["radial-gradient"]=d["linear-gradient"];var f={initial:"color",grab:"cursor",grabbing:"cursor","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","max-content":"width","min-content":"width","fit-content":"width","fill-available":"width","contain-floats":"width"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,k;for(k in d){var g=d[k],c=g.property,g=
k+"("+g.params+")";!b(g,c)&&b(a.prefix+g,c)&&a.functions.push(k)}for(var l in f)c=f[l],!b(l,c)&&b(a.prefix+l,c)&&a.keywords.push(l)})();(function(){function b(a){h.textContent=a+"{}";return!!h.sheet.cssRules.length}var d={":any-link":null,"::backdrop":null,":fullscreen":null,":full-screen":":fullscreen","::placeholder":null,":placeholder":"::placeholder","::input-placeholder":"::placeholder",":input-placeholder":"::placeholder",":read-only":null,":read-write":null,"::selection":null},e={keyframes:"name",
viewport:null,document:‘regexp(".")‘};a.selectors=[];a.selectorMap={};a.atrules=[];var h=m.appendChild(document.createElement("style")),k;for(k in d){var g=d[k]||k,c=k.replace(/::?/,function(b){return b+a.prefix});!b(g)&&b(c)&&(a.selectors.push(g),a.selectorMap[g]=c)}for(var l in e)d=l+" "+(e[l]||""),!b("@"+d)&&b("@"+a.prefix+d)&&a.atrules.push(l);m.removeChild(h)})();a.valueProperties=["transition","transition-property","will-change"];m.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
about yudian.js
function resizeHook(){
if(ww<=720){
var $bf=$(‘#bg-float‘);
$bf.css(‘width‘,ww+‘px‘);
var bf_height=ww/720*534;
if(wh>$bf.offset().top+bf_height){
$bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘);
}
}
}
以上是关于一个控制背景的显示公共方法 包括对ie的兼容性的主要内容，如果未能解决你的问题，请参考以下文章