Hello, World!


一个

大帅比

钢铁直男

8月 13

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

看到标题,可能很多人说,这有啥,不就是个固定背景图片么,一句background-image: url (xxx); background-attachment: fixed; background-size: cover;不就搞定了么?博主的网站不也是这么干的么?

如果你真的这么想,那你就大错特错了!

事实没这么简单,如果用了上述代码,你的博客在手机端显示效果就会很糟糕,效果如下:

看到最底下的白条了么?

只有滑动的时候会出现这种情况,而且只有手机端才有。

当我看到这个白条时,强迫症的我心情几乎是崩溃的:这个白条什么鬼!

于是百度Google了一大堆,最后得出的结果是:这是手机浏览器的通病,背景图片只会绘制显示出来的那部分,白条就是被挡住的那部分。

这怎么能忍!好在我的智商上线,立刻想到了用img标签代替背景图片的方法。代码如下:

 

<!--以下代码是为了能正确的显示固定不动的背景图片-->

<style>
.cbackground{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -999;
    background-size:cover;
}
</style>

<img src ="https://farm8.staticflickr.com/7059/7028960641_a8d4d989ff_o_d.jpg" class="cbackground" id="cbackground">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
var img = $("#cbackground");
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
var flag = IsPC(); //true为PC端,false为手机端
if(flag){
	e("cbackground").style.display="none"
}

window.onresize = function() {
	if(flag){
		pcResize();
	}else{
		mobileResize();
	}
}
window.onresize();
var exeOnce = false;
function pcResize(){
	if(!exeOnce){
			$("body").css({"background-image": "url('https://farm8.staticflickr.com/7059/7028960641_a8d4d989ff_o_d.jpg')",
				"background-repeat": "no-repeat",
				"background-position": "left",
				"background-attachment": "fixed",
				"background-size": "cover"});
	}
	exeOnce = true;
}

function mobileResize(){
	var w, h;
	w = screen.width;
	h = screen.height;
	autoResizeImage(w, h, "cbackground");
}

function autoResizeImage(maxWidth, maxHeight, id) {
	var objImg = e(id);
	var jImg = $("#" + id);
	var img = new Image();
	img.src = objImg.src;
	var hRatio;
	var wRatio;
	var Ratio = 1;
	var w = img.width;
	var h = img.height;
	wRatio = maxWidth / w;
	hRatio = maxHeight / h;
	if (maxWidth == 0 && maxHeight == 0) {
		Ratio = 1;
	} else if (maxWidth == 0) { //
		if (hRatio < 1) Ratio = hRatio;
	} else if (maxHeight == 0) {
		if (wRatio < 1) Ratio = wRatio;
	} else if (wRatio < 1 || hRatio < 1) { Ratio = (wRatio >= hRatio ? wRatio: hRatio);
	}
	if (Ratio < 1) {
		w = w * Ratio;
		h = h * Ratio;
	}
	/*objImg.style.height = h;
	objImg.style.width = w;*/
	jImg.css ({"width": w + "px", "height": h + "px"});
}
function e(e) {
	return document.getElementById(e);
}
</script>
<!--背景图片代码到此为止-->

嗯,这样差不多就搞定了。
现在看看,要完美的显示背景图片可不是一两句代码能解决的吧?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

www.000webhost.com