2023年政策修订增补工作正在进行中，欢迎参与！
  • Moegirl.ICU：萌娘百科流亡社群 581077156（QQ），欢迎对萌娘百科运营感到失望的编辑者加入！
  • Moegirl.ICU：账号认领正在试运行，有意者请参照账号认领流程。

模板:背景圖片區域/doc

萌娘百科，萬物皆可萌的百科全書！轉載請標註來源頁面的網頁連結，並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

本模板用於將一塊區域以某張圖片為背景進行填充。

由於萌娘百科禁止在內聯CSS插入鏈接，該模板使用相對定位和絕對定位實現。

舊參數為保留了原本的中文，新增的參數不再使用中文。

全部參數

點擊具體參數即可跳轉到詳細說明。

參數 說明
mode 模式
背景 / background 背景
外链背景
custombg
1（匿名參數） 內容
位置 / position 使用cover或contain模式時，背景位置
区域样式 / areastyle 整個區域的樣式（最外層容器）
图片样式 / imgstyle 圖片樣式（<img>外層的容器）

使用時不需要的參數不要保留。

基本用法

背景可使用內部圖片或外部圖片。

源碼： 

{{背景图片区域|背景=2021SummerDesktop.png|（需要显示的内容）}}
{{背景图片区域|background=2021SummerDesktop.png|（需要显示的内容）}}
{{背景图片区域|外链背景=https://img.moegirl.org.cn/common/0/03/2021SummerDesktop.png|（使用外部图片，填写URL）}}

顯示：

需要顯示的內容

註：當需要顯示的內容包含「=」時，例如{{背景图片区域|背景=xxx.png|<div style="xxx">内容</div>}}，將不會正確顯示。須在內容前面加上「1=」，即{{背景图片区域|背景=xxx.png|1=<div style="xxx">内容</div>}}。

模式

mode=cover/contain/fixed

以下示例中： 是完整圖片； 是圖片被隱藏掉的部分； 是實際顯示區域。

cover（默認）

  • {{背景图片区域|……}}
  • 或{{背景图片区域|mode=cover|……}}

圖片填充整個內容框。如果圖片的寬高比與內容框不相匹配，該圖片將被剪裁以適應內容框。

contain

  • {{背景图片区域|mode=contain|……}}

圖片整體在內容框內，在此前提下縮放至最大。

fixed

  • {{背景图片区域|mode=fixed|……}}

圖片大小固定，需要自己設定圖片大小和位置。

圖片大小

  • width
  • height

分別控制圖片的長寬，單位是px（即只用填數字，不帶單位）。兩者只用填一個，另一個會自動計算。

圖片位置

使用图片样式 / imgstyle控制位置。

top
left
right
bottom

值是CSS長度或百分數，可以是負值。與width和height參數不同的是，這個需要帶單位，單位有px、em、%等。

一般情況下指定其中一到兩個CSS屬性即可。同時指定了top與bottom，或left與right時，效果可參考MDN上position的說明文檔。

fixed模式示例

示例1：居左下 

{{背景图片区域
|mode=fixed
|background=Moegirl is watching you.jpg
|width=80
|imgstyle=left:0; bottom:0;
|1=（示例文字）
}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan laoreet quam, eget iaculis ligula porttitor varius. Aenean ornare eros sed dui facilisis congue. Proin in neque vel mauris tristique ornare. Quisque accumsan ut ipsum ac egestas. Mauris eleifend erat at ante vestibulum tempor. Suspendisse id varius ligula, vitae tristique nibh. Fusce vitae interdum purus. Sed tortor leo, ultrices nec sollicitudin malesuada, posuere sed diam. Nullam feugiat interdum dui, nec tempor enim blandit eu. Integer ultrices viverra consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis gravida quam vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a volutpat velit.

示例2：居正中 

{{背景图片区域
|mode=fixed
|background=Moegirl is watching you.jpg
|width=80
|imgstyle=left:50%; top:50%; transform:translate(-50%,-50%);
|1=（示例文字）
}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan laoreet quam, eget iaculis ligula porttitor varius. Aenean ornare eros sed dui facilisis congue. Proin in neque vel mauris tristique ornare. Quisque accumsan ut ipsum ac egestas. Mauris eleifend erat at ante vestibulum tempor. Suspendisse id varius ligula, vitae tristique nibh. Fusce vitae interdum purus. Sed tortor leo, ultrices nec sollicitudin malesuada, posuere sed diam. Nullam feugiat interdum dui, nec tempor enim blandit eu. Integer ultrices viverra consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis gravida quam vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a volutpat velit.

注意到上面使用了transform:translate(-50%,-50%)，是因為僅用left:50%和top:50%時，實際上是圖片左上頂點在正中央，使用transform使其向左上移動自身的50%，這樣圖片就在正中央了。

其他參數

區域樣式 / areastyle

對整個背景圖片區域添加樣式，如設置大小、邊框等。

圖片樣式 / imgstyle

對圖片添加額外的CSS進行修飾。
注意：為了移動端的兼容性，該樣式實際上添加在<img>標籤外部的<div>容器上，因此部分參數無法生效。
使用例1：

添加opacity樣式更改透明度。 

{{背景图片区域|背景=2021SummerDesktop.png|图片样式=opacity:0.4|（示例文字）}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan laoreet quam, eget iaculis ligula porttitor varius. Aenean ornare eros sed dui facilisis congue. Proin in neque vel mauris tristique ornare. Quisque accumsan ut ipsum ac egestas. Mauris eleifend erat at ante vestibulum tempor. Suspendisse id varius ligula, vitae tristique nibh. Fusce vitae interdum purus. Sed tortor leo, ultrices nec sollicitudin malesuada, posuere sed diam. Nullam feugiat interdum dui, nec tempor enim blandit eu. Integer ultrices viverra consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis gravida quam vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a volutpat velit.

使用例2：

添加background樣式[imgstyle 1]，改變圖片尚未加載（或加載失敗）時的背景顏色，避免突兀。

例如，對於本圖片，可以使用： 

{{背景图片区域|background=2021SummerDesktop.png
|imgstyle=background:linear-gradient(to right, #e2b5d4, 70%, #a7cffb)
|（示例文字）}}

圖片尚未加載或加載失敗時，效果將會是：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan laoreet quam, eget iaculis ligula porttitor varius. Aenean ornare eros sed dui facilisis congue. Proin in neque vel mauris tristique ornare. Quisque accumsan ut ipsum ac egestas. Mauris eleifend erat at ante vestibulum tempor. Suspendisse id varius ligula, vitae tristique nibh. Fusce vitae interdum purus. Sed tortor leo, ultrices nec sollicitudin malesuada, posuere sed diam. Nullam feugiat interdum dui, nec tempor enim blandit eu. Integer ultrices viverra consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis gravida quam vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a volutpat velit.

  1. ↑ 此樣式不是模板參數中的background / 背景

位置 / position

使用cover或contain模式時，控制圖片對齊位置，默認在中央。
(ｉ)注意：該參數在移動端網頁不生效。

在top、bottom、left、right、center選擇一到兩個關鍵字。例如：

|position=top（或|position=top center、|position=center top，順序不重要）

|position=right（或|position=center right、|position=right center，順序不重要）

|position=bottom left或|position=left bottom（順序不重要）

參數還可以是其他形式，詳見MDN的object-position。

imgclass

設置圖片的class。
設置為nomobile，可使圖片在移動端不可見；
設置為mobileonly，可使圖片僅在移動端可見。

custombg

自定義背景，可以在裡面寫wikitext（及HTML）。鏈接自然不能點。

示例： 

{{背景图片区域
|custombg=想啊，很想啊！
|imgstyle=font-size:5em; font-weight:bold; opacity:.3;
|（示例文字）
}}
想啊，很想啊！

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan laoreet quam, eget iaculis ligula porttitor varius. Aenean ornare eros sed dui facilisis congue. Proin in neque vel mauris tristique ornare. Quisque accumsan ut ipsum ac egestas. Mauris eleifend erat at ante vestibulum tempor. Suspendisse id varius ligula, vitae tristique nibh. Fusce vitae interdum purus. Sed tortor leo, ultrices nec sollicitudin malesuada, posuere sed diam. Nullam feugiat interdum dui, nec tempor enim blandit eu. Integer ultrices viverra consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis gravida quam vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a volutpat velit.

 
查 · 論 · 編
圖像模板
幫助:上傳圖片 • 幫助:圖像 • 幫助:外部圖像 • 幫助:Imagemap
常規 / 未分組
多功能{{Image}}[模板注 1] • {{背景圖片}} • {{背景圖片區域}} • {{替換側邊欄底圖}} • {{Emoji}}[模板注 2] • 懸浮切換{{PicHover}} • {{蒙版圖片}} • {{像素圖}} • {{Svg}}
裁剪 / 雪碧圖
[模板注 3]
{{鏈接圖組}} • {{Image/banner}} • {{Image-clip}} • {{Sprites}}
圖像排版
{{Multiple image}} • {{Image frame}} • 畫廊{{Gallery}}[模板注 4] • 附帶說明{{Plain image with caption}} • {{圖注}} • {{Image label}} • 適應容器{{Fit-image}} • {{Boxed-image}} • 頭像+名字{{NavChara}}[模板注 5] • 豎直滾動{{Tall image}} • 水平滾動{{Wide image}} • 圖片輪播{{ActivityBanner}} • {{遊戲場景展示}}
外部圖像
[模板注 6]
維護
 
注釋
  1. ↑ 如果只是想呈現某個圖片，不應該使用此模板，而是使用Wiki自帶的方法。
  2. ↑ 已過時，非特殊情況直接使用Emoji字符即可。
  3. ↑ 雪碧圖/精靈圖（Sprites）：將多個小圖片集中到一張圖片中，使用時裁剪，可減少請求次數、加快加載速度。
  4. ↑ 建議優先使用Wiki的畫廊語法。
  5. ↑ {{Image/banner}}的非雪碧圖+輕量化版本。
  6. ↑ 不在此分組的模板也可能能夠調用外部圖像。不推薦大量使用外部圖像，如果需要長期使用，請將圖像上傳到共享站。
  7. ↑ 圖片存在時調用圖片，不存在時顯示為鏈接。
  8. ↑ 保證以外鏈形式調用內部圖像被系統標記為正在使用。
取自「https://moegirl.icu/index.php?title=Template:背景图片区域/doc&oldid=6646411」