LV. 30
GP 5k

【密技】終於找到讓小屋背景圖,自動縮放的方法(新增完整教學)

樓主 深海異音 hbl917070
159 -

我的小屋
不論使用者怎麼縮放網頁,貓頭鷹都能正確的在右邊以滿版來顯示






一般有背景圖片的網站,會用2種CSS來讓背景圖片可以自動進行縮放

/*把背景圖片放大到填滿整個指定範圍,超過的部分會被切掉*/
body{background-size: cover;  }

或是

/*在指定的範圍內,把背景圖片放到最大*/
body{background-size: contain;  }


但巴哈姆特的小屋並沒有用最新的CSS語法,所以背景圖片不會自動縮放
舉例來說
我用一張寬度1600的圖片當成小屋背景圖
那麼其他人如果他的螢幕寬度不是1600,或是他網頁的顯示比例不是100%
那他看到的背景圖片就會跑版,因為他的網頁寬度不是1600




解決的辦法很簡單,只要背景圖片是SVG就行了
SVG是一種向量圖片,如果網頁沒有特別設定SVG的size
那麼瀏覽器就會自動把這個SVG的圖片放大到全滿
效力等同於 background-size: contain;

svg的語法如下
記得修改這3個地方
「圖片的原始寬度」、「圖片的原始高度」、「圖片的base64」

<?xml  version="1.0"  encoding="utf-8"?>
<svg  version="1.1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0  0  圖片的原始寬度  圖片的原始高度"  >
    
    <image  width="100%"  height="100%"
                  xlink:href="圖片的base64"
                  transform="matrix(1 0 0 1 0.5 0)">
    </image>
    
</svg>


我開發的 TiefSee 有內建把圖片轉成base64的功能
或是用線上的轉換器也行


用記事本輸入上面那坨svg的語法後,存檔即可
記得附檔名要是「svg」,例如檔名可以是「123.svg」



存檔完成後,測試用瀏覽器開啟這個svg,測試看看是否能夠正常開啟圖片
直接點著檔案,拖進google chrome瀏覽器裡面,就會開起來了





比較麻煩的是SVG不能丟到一般的圖片空間,必須使用支援靜態網頁的伺服器
一般常見的伺服器託管空間,對一般使用者來說可能太麻煩了
所以這邊用google雲端硬碟當示範


首先在谷歌雲端硬碟裡面新增一個資料夾,例如我取名叫做「imgs」



把剛剛的「123.svg」丟進去
然後在桌面新建一個叫做「index.html」的空白文字檔,也丟進去雲端硬碟裡面



把權限改成「網路上所有使用者均可以找到並且檢視」






這個是可以把google雲端硬碟變成靜態網頁伺服器的東東
https://www-drv.com/index.html

進去後選google雲端硬碟



接著把他跳出來的那些授權什麼的都同意後,會進入到這個頁面
他會直接列出所有能夠變成靜態伺服器的資料夾
我雲端硬碟裡面只有一個資料夾裡面有「index.html」,所以他就只列出一個網址




點進去後一片白白的就是成功了,因為剛剛上傳的「index.html」就是伺服器的「首頁」
但是我們沒有輸入任何東西進去,所以是網頁是一片白



在這個網址後面加上剛剛上傳的svg檔名,就會變成svg的圖片啦
例如我的檔名是「123.svg」
不過我建議先把他全選複製起來再按enter載入
因為載入圖片後,他的網址會改變,而且變得很長






巴哈要求圖片網址結尾必須是「.jpg」或「.png」或「.gif」
所以利用網址裡「#」,後面的東西不會送到伺服器的特性就能解決
在svg網址的結尾加入「#.jpg」
例如svg的網址是「https://yx1cbppabsavoczmuvkleg-on.drv.tw/imgs/123.svg」
那麼改成「https://yx1cbppabsavoczmuvkleg-on.drv.tw/imgs/123.svg#.jpg
就能夠在巴哈使用這張SVG了


最後就能快樂的在巴哈的小屋使用svg圖片啦



159
-
LV. 23
GP 288
2 樓 伊莉雅我老婆 sin040307
2 -
先卡個有空研究
巴哈做小屋的功能真的滿滿缺陷
一堆東西都要自己搞
2
-
LV. 15
GP 386
3 樓 我喜歡吃飯 a130135437
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

異音實用文推
0
-
LV. 8
GP 29
4 樓 茶茶小馬 g3646791
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

博士和助手好可愛喔
0
-
LV. 15
GP 513
5 樓 Caiseu225(肺紋疾走模式) Finale8763
0 -
0
-
LV. 25
GP 282
6 樓 ゞ白千羽☆ fc920728
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

0
-
LV. 20
GP 469
7 樓 IlIOHOIlI didi797979
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

0
-
LV. 38
GP 2k
8 樓 三日 ccuu1277
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

卡改
0
-
LV. 17
GP 38
9 樓 胡椒 shawn0221
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

推深音

0
-
LV. 24
GP 514
10 樓 玥楓(兔兔我的) q956345
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

先推再看
0
-
LV. 31
GP 2k
11 樓 現在勁行の楽園 sunofbeachh2
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

先推不然怕有人發現我不懂
0
-
LV. 17
GP 46
12 樓 小肥z kklic500
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

你不要這麼專業好不好
0
-
LV. 2
GP 9
13 樓 懶o洋o洋 ALEX940917
0 -
推實用文,雖然我看不懂
0
-
LV. 40
GP 436
14 樓 戰讚顫-飢渴被%模式 a61456711
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

手機看悲劇(;´∀`)

0
-
LV. 20
GP 1k
15 樓 最速風騷大神彩砲 rainbowstar5
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

有空來研究看看
0
-
LV. 17
GP 15
16 樓 絲襪教主 yuusha1224
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

推上去假裝我懂
0
-
LV. 31
GP 662
17 樓 月色 whatsusee1
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

推異音
0
-
LV. 9
GP 0
18 樓 突破盲腸的炎 bnmbnm5945
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

0
-
LV. 19
GP 199
19 樓 玄暗烏黛墨縲黑黓焦皂 LianSheng142
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

利用 url.hash 規避限制,這個做法我第一次是在這位巴友的小屋裡看到

只不過他是用 php 而非 svg
0
-
LV. 15
GP 386
20 樓 我喜歡吃飯 a130135437
0 -
不能沉
0
-
未登入的勇者,要加入 29 樓的討論嗎?
板務人員:

7589 筆精華,昨天 更新
一個月內新增 9
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】