本模板用于将一块区域以某张图片为背景进行填充。
由于萌娘百科禁止在内联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/mode=contain/mode=fixed
以下示例中： 是完整图片； 是图片被隐藏掉的部分； 是实际显示区域。
cover（默认）
{{背景图片区域|……}}- 或
{{背景图片区域|mode=cover|……}}
图片填充整个内容框。如果图片的宽高比与内容框不相匹配，该图片将被剪裁以适应内容框。
contain
{{背景图片区域|mode=contain|……}}
图片整体在内容框内，在此前提下缩放至最大。
fixed
{{背景图片区域|mode=fixed|……}}
图片大小
widthheight
分别控制图片的长宽，单位是px（即只用填数字，不带单位）。两者只用填一个，另一个会自动计算。
图片位置
使用图片样式 / imgstyle控制位置。
|imgstyle=
topleftrightbottom值是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.
| |||||||||||||||||||||||||||||||||