模板:背景圖片/doc

注意：該模板因兼容性問題在IE瀏覽器下會導致圖片不能以原始寬高比顯示，而是以拉伸的方式鋪滿全屏。

請模板使用者注意：請儘量使用像素不低於1920*1080的位圖圖片，以保證在各種解析度的設備上都不會出現圖片被強行放大後模糊的情況。

請模板使用者注意：請儘量不要使用webp格式圖片，以保證Safari用戶正常查看。

本模板已應用於12000+頁面。
為避免大規模的破壞及不必要的伺服器負荷，任何改動均應先在該模板對應的沙盒頁面或您自己的用戶頁下進行測試，並將測試無誤的代碼一次性地改動至本模板。
為尊重其他用戶，任何功能/兼容性改動在生效前都應先在討論頁進行討論。

介紹

該模板將在保證覆蓋背景且不改變原始寬高比的情況下儘可能合適地顯示背景圖片。

縮放與顯示規則

該模板會以圖片寬或高中較小的一個為準，將圖片等比例縮放至與窗口相同寬度/高度，使圖片完全覆蓋窗口。

下面的示例中：深藍代表完整圖片，淺藍為窗口，也就是說在除了少數圖片寬高比完全契合設備(窗口)寬高比的情況下，大部分時候圖片是不能完整顯示的。

使用橫向圖片時

使用縱向圖片時

注意

• 請將這個模板置於條目頁底（而不是頁頂），否則更新姬將會抓取本模板中的圖片當成條目配圖推送。
• 請將這個模板置於條目的== 外部链接 ==之上。
• 請儘量使用像素不低於1920*1080的位圖圖片，以保證在各種解析度的設備上都不會出現圖片被強行放大後模糊的情況。

使用方式

參數：

• url：圖片的地址，內外鏈均可。
• displaylogo：替換背景圖後顯示萌百logo，默認開啟（yes），可以手動關閉（傳入no）。一般不推薦隱藏。
• color：用於設置一個以顏色值定義的背景顏色，該參數設置的背景顏色會被url的圖片所覆蓋。即使在使用圖片時也可以設置該值，這可能在某種程度上會緩解由於背景圖片的突然顯示所造成的突兀感（在圖片加載完之前會顯示背景顏色）。
• position：用於對背景圖片進行定位，默認為居中顯示(見#縮放與顯示規則中的示例)，常用的定位可以參考使用下列值：
  • 【top】：優先上方顯示（這通常用於豎向圖片）
  • 【bottom】：優先下方顯示（這通常用於豎向圖片）
  • 【left】：優先左部分顯示（這通常用於橫向圖片）
  • 【right】：優先右部分顯示（這通常用於橫向圖片）

如需精確調節，請使用x轴偏移 y轴偏移這種寫法，偏移以圖片左上角為基點，常用的單位有百分比(%)或像素(px)。當使用百分比時，100%是縮放後圖片寬或高較大一邊減去視口相同邊的剩餘空間，也就是說，設置0~100%都不會使圖片過度偏移，露出萌百網站原始的背景。另外，使用百分比單位時橫圖設置y軸偏移無效，豎圖設置x軸偏移無效，其他單位沒有此限制。x和y可以使用不同的單位，也可以使用關鍵字(top、bottom、left、right)。示例見：#示例7

position的參數值實際上就是傳給了CSS的object-position屬性，更多信息請查看MDN中對於CSS3屬性object-position的介紹。

• shade：設置背景圖片的顏色疊加層不透明度，默認為0，可選值為0到1。
• shadeColor：設置疊加層的顏色，默認為白色。
• animate：賦予背景圖片一個簡單的動畫效果，這個效果將在圖片加載完成後播放，默認值為show。該參數不局限於下面所列出的值，可以自由實現(利用Templatestyles)並填寫。
  • 【none】：不使用動畫
  • 【show】：從透明轉為不透明（不透明度100%）
  • 【shrink】：大小由115%轉為100%
  • 【clear】：由模糊轉為清晰
  • 【appear】：大小由130%轉為100% + 從透明轉為不透明
  • 【look】：視角變化，圖片高度越大越明顯。當position為bottom時，視角變化為（下 => 上 => 下），其他情況均為（上 => 下 => position參數的值），也可以使用【look-top】或【look-bottom】強制指定。注意，若在圖片經過適應屏幕寬度後，發生了圖片高度小於設備高度的情況（這時圖片會進行放大以占滿屏幕高度），則該效果會變成「以屏幕左上角為基點進行縮小（150% => 100%）」。
• action：規定動畫如何進行，相當於CSS的animation屬性值中從第二個位置開始的值，不填將使用默認值。
• make：該參數允許你對一個占據背景空間的透明div設置樣式（如一些複雜的漸變色函數技術），將其作為背景使用。
• style：對背景圖片添加css樣式，注意如果和模板定義的樣式發生重複，將會覆蓋掉模板的對應css樣式，建議在閱讀模板源碼後使用。

替換logo

在使用該模板添加背景圖片後，屏幕左上角會出現替代的萌百logo。你也可以選擇使用一個自定義圖片替換這個logo（一般不推薦這樣做）。

• logo-url：logo圖片的地址，內外鏈均可。
• logo-size：控制logo大小。如果傳入一個值，則這個值指定logo的寬度；如果傳入兩個值（用空格分隔），則第一個值指定logo的寬度，第二個值指定logo的高度；如果傳入關鍵字cover，則縮放圖片使之能完全覆蓋logo區域，可能圖片部分看不見；如果傳入關鍵字contain，則縮放圖片使之能完全裝入logo區域，可能logo區域部分空白。
• logo-position：在這裡填入兩個css長度，只能以像素為單位，比如「-10px -17px"等，如果格式不對將不會起效。此參數設置的是圖片偏移值，以原logo左上角為原點，向右為x軸正方向，向上為y軸正方向，此參數的兩個值分別設置新的logo的左上角的橫豎坐標。

簡寫

若無特殊說明，下文中的部分文件名或為虛構。

若只填寫圖片路徑，則可以使用如下寫法：

{{背景图片|示例图片.jpg}}

示例

示例1

將一個圖片作為背景，全部使用默認值。

{{背景图片|あそびあそばせ.jpg}}

示例2

將一個顏色作為背景。

{{背景图片|color=red}}

示例3

將一個圖片作為背景，並添加一個背景顏色，以減少在圖片加載時所產生的視覺上的突兀，同時規定動畫效果為「appear」。

{{背景图片
|url= あそびあそばせ.jpg
|color= #80DBB0
|animate= appear
}}

示例4

將一個圖片作為背景，並添加黃色遮罩。

{{背景图片
|url= あそびあそばせ.jpg
|shade= 0.5
|shadeColor= yellow
}}

示例5

假設自定義實現了一個動畫「fromBottom」，並使用。

/* Example/styles.css */

@keyframes fromBottom {
  from {
    margin-top: 100vh;
  }
}

{{背景图片
|url=あそびあそばせ.jpg
|animate= fromBottom
|action= 0.3s ease
}}

示例6

使用「make」參數畫一個背景。

{{背景图片
|make= background:linear-gradient(red, blue)
}}

示例7

使用「position」參數精確控制背景圖片位置。

{{背景图片|url=横图.jpg|position=0 50%}}  <!-- 这相当于left -->
{{背景图片|url=横图.jpg|position=100% 50%}}  <!-- 这相当于right -->
{{背景图片|url=竖图.jpg|position=50% 0}}  <!-- 这相当于top -->

{{背景图片|url=竖图.jpg|position=50% 30%}}  <!-- 偏移y轴剩余空间的30% -->
{{背景图片|url=竖图.jpg|position=9999% 30%}}  <!-- 当使用竖图时设置x轴的百分比无效，这里设置了多少也不会生效 -->

示例8

替換左上角的萌娘百科logo

注意：Moeskin皮膚不支持此功能

{{背景图片|logo-url=File:LOGO_REPLACE.png|logo-size=cover}}

其他

• {{替換側邊欄底圖}}