置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:背景圖片區域

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

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

由於萌娘百科禁止在內聯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長度或百分數,可以是負值。與widthheight參數不同的是,這個需要帶單位,單位有px、em、%等。

一般情況下指定其中一到兩個CSS屬性即可。同時指定了topbottom,或leftright時,效果可參考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

使用covercontain模式時,控制圖片對齊位置,默認在中央。
(i)注意:該參數在移動端網頁不生效。

topbottomleftrightcenter選擇一到兩個關鍵字。例如:

|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.