模板:背景圖片區域/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
控制位置。
|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.
- ↑ 此樣式不是模板參數中的
background
/背景
位置 / position
在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.
|