背景更改如下：

背景容器

我背景是在頁首html代碼中自定義的一段：

<div id="bgcont"><img id="bgimg" src="@{imgurl}"> </div>

這樣可以比較方便的控制，也方便以后加一些功能之類的

圖片平鋪設置

首先要分兩種屏幕去適應：
1> 較寬的屏幕
2> 較高的屏幕

對于較寬還是較高的判斷還是比較好實現的：

let pw = 1920; let ph = 1222; let sw = window.innerWidth; let sh = window.innerHeight;if (sw / sh > pw / ph) {較寬 } else {較高 }

pw是圖片寬度，ph是圖片高度
sw是窗口寬，sh是窗口高
利用兩者的寬高比就比較容易實現想要達到的判斷了

較寬的窗口我是讓圖片寬度填滿窗口，高度上進行裁剪
同理較高的窗口我是讓圖片高度填滿窗口，寬度上進行裁剪

但是我想讓miku雙眼一直在窗口區域內，也就是說，我需要對圖片進行一些偏移
這個偏移只發生在
較寬的窗口中對top偏移，較高的窗口中對left偏移【換成bottom和right一樣】

以窗口較高的時候的代碼解釋一下吧：

bg.style.height = "100%"; bg.style.width = "auto"; bg.style.top = "0"; let l = sw / 2 - pw * 0.65 / 1222 * sh; if (l > 0) l = 0; let d = sw - l - pw/ph*sh; if (d < 0) d = 0; l += d; bg.style.left = l + "px";

bg是那個img
前三句是消除窗口較寬時產生的影響，你會發現這兩坨代碼就是圍繞height,width,top,left這四個屬性來回折騰的
l是計算出來的left值，
后邊那句和在之后的d就是消除對應點移動到中心后產生的白邊
最后算出一個left值
在let l = sw / 2 - pw * 0.65 / 1222 * sh;這句中的0.65是你想要讓圖上一點始終出現在窗口中，這個點在圖像中的位置為0.65圖像寬度，也就是說只要改掉這個0.65，就可以很隨意的控制想要實現的區域

值計算

前邊粗粗的橙不拉基的那個框是屏幕，淡綠色的是圖片，紅色的點是對應要顯示出來的區域，屏幕中有一條藍色的線是屏幕中線
首先要計算出把紅點平移到屏幕中線上需要指定的left，也就是這個樣子：

可以看到，l大于0，左邊出現了白邊，那么我們需要把l改為0，消除白邊

但是有時指定的區域過于靠右邊，如下圖：

這樣在窗口右邊產生了空白，之后就是要消除這個空白
計算出的d就是右邊空白的大小，d若大于0，右邊就會出現空白，l需要減去d，以消除空白。若d小于0，則無需進行這一個操作，于是這一步就退化成了if (d < 0) d = 0; l += d;這兩句

整個過程中我圖中的l與代碼中的l是有區別的，你會發現，我圖中的l與實際賦值時的l是相反數，但是我代碼中的l就是直接賦值給left的值，所以有些東西和代碼中有區別，但是把我代碼中的l全部取反就一樣了

對于top也是同理的操作

轉載于:https://www.cnblogs.com/ijrys/p/8455312.html

總結

以上是生活随笔為你收集整理的博客园自定义背景（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。