創作內容

81 GP

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

作者:深海異音│2019-04-17 05:18:38│贊助:1,160│人氣:1227

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






一般有背景圖片的網站,會用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圖片啦



引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4361955
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 24 篇留言

moinia-鎮魂曲
問個題外話 做IT的一定要有大學以上學歷嗎,自學有沒有機會進資訊部門工作或是實習

04-17 05:44

深海異音
我還是學生耶...04-17 05:47
賺大錢養星白
畢業後有興趣來外商嗎?

04-17 06:06

深海異音
聽起來待遇好像不錯04-17 06:12
刪除^
異音同學怎麼可以那麼有才華阿OuO

04-17 09:07

我只是路過的蘿莉控
厲害餒
收藏起來

04-17 09:11

雪糕狐
覺得你這篇很有道理要應用的時候發現我小屋沒背景

04-17 11:51

ays.
用 # 來 Bypass 很可以XDDD 夠 Hack XDDD

我也來分享個之前看到的,之前寫 Line機器人時有發現line 撈外部圖片時 line 會習慣在網址後面加上 /100 /400 /800 拿不同解析度的圖片,但是有些外部網站多了這個就花拿不到圖片

當時看到的其中一個解法就是在外部網址後面直接加 # 字號,雖然失去了不同解析度的意義,但是Line就可以吃的到了

04-17 16:05

深海異音
幸好他們用的過濾只簡單的從結尾附檔名判斷,
而不是網址「#」或「?」前面必須結尾是圖片附檔名的強制判斷04-17 21:16
比企鵝
每日廚深音[e18]

04-17 21:07

Travel
這可以用在深色主題嗎?

04-17 21:34

深海異音
可以呀,svg說到底還是一種圖片,所以沒有影響04-17 21:38
agold404
原來放了datauri的svg放在img src、css background url裡面可以正常顯示
真可惜外連不行

04-17 21:36

深海異音
svg裡面的點陣圖,只能用base64來內嵌,外連會沒辦法讀取
這點實在蠻頭痛的,應該是基於安全性鎖掉了04-17 22:57
雞塊
請問大大 我能不能把雲端設公開 然後在巴哈那直接貼雲端svg的網址(配上#)

05-13 23:55

深海異音
理論上可以,但不能保證這個連結的穩定性
我自己是沒有實際測試過啦
也許幾小時後連接就會掛掉,也許好幾年都沒事05-13 23:59
(´奶Д子`)
最近剛好在做小屋佈景 受用無窮

06-04 09:39

(´奶Д子`)
可惜動圖好像用不了這方法

06-04 09:57

深海異音
可以,gif、apng、webp 都可以06-04 13:16
(´奶Д子`)
原來是firefox的問題,firefox不會動chrome會動

06-04 23:24

(๑•́ ¸•̀)〈影ヨ⁆
最近在玩小屋佈景,沒想到就能有幸看到想關內容的這篇。 [e7]

06-09 20:36

(๑•́ ¸•̀)〈影ヨ⁆
喔不──都到了最後步驟,還沒有成功……


首先列出不同的地方:

因為 avast free antivirus 掃描 www-drv.com/index.html 而檔下,於是換成 drv.tw/ 這個;
也成功連結 Google Drive 且呈現並改為 mrmsdh5elgjxlujyqqwl2g-on.drv.tw/DriveToWeb/933X700(1920X1080)toraCrossoverDoRa.svg#.png 這樣。

卻在小屋佈景儲存時,直接回復成例如最初的無網址……


────────────

原本是以上這樣啦──但,想到會不會是「網址連同名稱」整個太長而無法存檔……
結果,好像還真的是如此的樣子(?)
畢竟在改為 mrmsdh5elgjxlujyqqwl2g-on.drv.tw/DriveToWeb/1920X1080toraDoRa.svg#.png 這樣之後,
就順利存好了!


差點又要因小狀況,而詢問 深海 了。 XDD

06-10 16:52

(๑•́ ¸•̀)〈影ヨ⁆
不過,還是想問個:為什麼「image width="100%" height="100%"」這裡全改為50的話,看起來卻沒變化呢?

因為原本圖只有933×700大,可又想「讓成像的內容,置於最底左下角」這樣排版,
於是以為改%數就行了……沒想到似乎沒效果(?)

06-10 16:59

深海異音
https://truth.bahamut.com.tw/s01/201906/8dd4af5776623409d0f2a198dda6b271.JPG06-10 21:19
深海異音
看看這樣有沒有效果,如果單純把圖片縮小,那麼圖片的位置會在左上角而不是左下角
所以要再修改圖片的坐標,就是把y軸的坐標設定成高度的負一半06-10 21:20
深海異音
svg改完並且重新上傳到google雲端後,完後記得到小屋把背景圖片設定成靠左下對齊06-10 21:21
深海異音
https://truth.bahamut.com.tw/s01/201906/b212ba98a69b7102d241211b6d8cc82e.JPG06-10 21:22
(๑•́ ¸•̀)〈影ヨ⁆
好的,會試試這作法看看這方法有沒有效;若還是沒變化的話……

也只能再換回目前的替代方案了:


把圖,直接用 PhotoCap 6.0 「面板大小」 向右上延伸增大至1920×1080重存;
再依剩下,您教學文部分同樣的步驟處理就好。

那麼, [e41][e41] 謝謝 深海 的解答囉!

06-10 21:38

(๑•́ ¸•̀)〈影ヨ⁆
可行耶! [e41][e41] 再次地謝謝囉。

06-13 22:13

(๑•́ ¸•̀)〈影ヨ⁆
想知道── image width="50%" height="50%" 這樣是對應 viewBox="0 -350 933 700" 這個,

那如果 width="75%" height="75%" 這樣的話,卻不是對應 viewBox="0 -525 933 700" 耶……

這之間的關係是怎麼樣的呢?

06-13 22:44

深海異音
size設定成75%的話,就是要y軸要往反方向移動25%才會歸零,所以是「-175」06-13 22:47
(๑•́ ¸•̀)〈影ヨ⁆
這樣的話,大小是25%;(才是)y軸反移75%,即(剛才的)「-525」沒錯囉?

06-13 22:56

深海異音
是呀06-13 22:58
(๑•́ ¸•̀)〈影ヨ⁆
經由 drv.tw 轉換的連結,今天首次出現「你的連線不是私人連線」……
可還是能看到範例的貓頭鷹呀;我這邊的竟然反而變這樣,這有哪個可能造成呀?
共用設定也是完全相同呢……

06-15 19:54

深海異音
我用的是 github的伺服器
我猜是google雲端硬如果流量太高就會封鎖
我自己也沒有試過高負荷的連線,所以不確定06-15 20:38
(๑•́ ¸•̀)〈影ヨ⁆
對喔!難怪它是「時不時地變」那樣──

這跟之前經驗過「想下載他人提供且熱門的G雲端連結,卻說流量問題而被迫不能出現下載鈕」的類似。

06-15 20:45

(๑•́ ¸•̀)〈影ヨ⁆
[e8] 發現可能跟我取的檔名有關……改成「沒有括弧或%20」就沒問題了的樣子。 ww

06-15 23:11

深海異音
的確有這個現象,有些伺服器不支援在網址裡面輸入特殊符號,所以會轉換成%20 %21 %22 之類的
http://www.w3school.com.cn/tags/html_ref_urlencode.html
06-15 23:21
我只是路過的蘿莉控
剛剛試了一下,google drive的資料夾共用只要開「知道連結的使用者」就行了

08-20 04:49

我要留言提醒:您尚未登入,請先登入再留言

81喜歡★hbl917070 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【js腳本】優化巴哈界面... 後一篇:場外最大的PK系統上線啦...

追蹤私訊

作品資料夾

a4755063巴友
久違的小說更新,快來看喔~喜歡的歡迎追蹤留言或分享,我是id我愛你們~看更多我要大聲說昨天11:35


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

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