背景更改如下：

背景容器

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

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

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

圖片平鋪設(shè)置

首先要分兩種屏幕去適應(yīng)：
1> 較寬的屏幕
2> 較高的屏幕

對(duì)于較寬還是較高的判斷還是比較好實(shí)現(xiàn)的：

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

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

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

但是我想讓miku雙眼一直在窗口區(qū)域內(nèi)，也就是說，我需要對(duì)圖片進(jìn)行一些偏移
這個(gè)偏移只發(fā)生在
較寬的窗口中對(duì)top偏移，較高的窗口中對(duì)left偏移【換成bottom和right一樣】

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

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是那個(gè)img
前三句是消除窗口較寬時(shí)產(chǎn)生的影響，你會(huì)發(fā)現(xiàn)這兩坨代碼就是圍繞height,width,top,left這四個(gè)屬性來回折騰的
l是計(jì)算出來的left值，
后邊那句和在之后的d就是消除對(duì)應(yīng)點(diǎn)移動(dòng)到中心后產(chǎn)生的白邊
最后算出一個(gè)left值
在let l = sw / 2 - pw * 0.65 / 1222 * sh;這句中的0.65是你想要讓圖上一點(diǎn)始終出現(xiàn)在窗口中，這個(gè)點(diǎn)在圖像中的位置為0.65圖像寬度，也就是說只要改掉這個(gè)0.65，就可以很隨意的控制想要實(shí)現(xiàn)的區(qū)域

值計(jì)算

前邊粗粗的橙不拉基的那個(gè)框是屏幕，淡綠色的是圖片，紅色的點(diǎn)是對(duì)應(yīng)要顯示出來的區(qū)域，屏幕中有一條藍(lán)色的線是屏幕中線
首先要計(jì)算出把紅點(diǎn)平移到屏幕中線上需要指定的left，也就是這個(gè)樣子：

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

但是有時(shí)指定的區(qū)域過于靠右邊，如下圖：

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

整個(gè)過程中我圖中的l與代碼中的l是有區(qū)別的，你會(huì)發(fā)現(xiàn)，我圖中的l與實(shí)際賦值時(shí)的l是相反數(shù)，但是我代碼中的l就是直接賦值給left的值，所以有些東西和代碼中有區(qū)別，但是把我代碼中的l全部取反就一樣了

對(duì)于top也是同理的操作

轉(zhuǎn)載于:https://www.cnblogs.com/ijrys/p/8455312.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。