查看“模板:背景图片区域/doc”的源代码

<includeonly>[[分类:格式模板]][[分类:使用模板样式的模板]]</includeonly><noinclude>[[Category:模板文档]]</noinclude>
本模板用于将一块区域以某张图片为背景进行填充。

由于{{SITENAME}}禁止在内联CSS插入链接，该模板使用相对定位和绝对定位实现。

旧参数为保留了原本的中文，新增的参数不再使用中文。

==全部参数==
点击具体参数即可跳转到详细说明。
{|class="wikitable"
!参数!!说明
|-
|[[#模式|<code>mode</code>]]||模式
|-
|[[#基本用法|<code>背景</code> / <code>background</code>]]||rowspan="3"|背景
|-
|[[#基本用法|<code>外链背景</code>]]
|-
|[[#custombg|<code>custombg</code>]]
|-
|[[#基本用法|<code>1</code>（匿名参数）]]||内容
|-
|[[#位置 / position|<code>位置</code> / <code>position</code>]]||使用cover或contain模式时，背景位置
|-
|[[#区域样式 / areastyle|<code>区域样式</code> / <code>areastyle</code>]]||整个区域的样式（最外层容器）
|-
|[[#图片样式 / imgstyle|<code>图片样式</code> / <code>imgstyle</code>]]||图片样式（<code>&lt;img&gt;</code>外层的容器）
|}
使用时不需要的参数'''不要保留'''。

==基本用法==
背景可使用内部图片或外部图片。

'''源码：'''
<pre>{{背景图片区域|背景=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|（需要显示的内容）}}</pre>
<pre>{{背景图片区域|background=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|（需要显示的内容）}}</pre>
<pre>{{背景图片区域|外链背景=https://vrp.wiki/images/7/7c/VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|（使用外部图片，填写URL）}}</pre>

'''显示：'''
{{背景图片区域|背景=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|需要显示的内容}}

注：当需要显示的内容包含“=”时，例如<code>&#123;&#123;背景图片区域|背景=xxx.png|&lt;div style<span style="color:red;font-weight:bold">=</span>"xxx"&gt;内容&lt;/div&gt;&#125;&#125;</code>，将不会正确显示。须在内容前面加上“1=”，即<code>&#123;&#123;背景图片区域|背景=xxx.png|<span style="color:green;font-weight:bold">1=</span>&lt;div style="xxx"&gt;内容&lt;/div&gt;&#125;&#125;</code>。

==模式==
<code>mode=cover/contain/fixed</code>

以下示例中：
<span style="display:inline-block; width:3em; height:2em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); vertical-align:middle;"></span> 是完整图片；
<span style="display:inline-block; width:3em; height:2em; background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),linear-gradient(to right,#e8c4dd,70%,#b9d9fc); vertical-align:middle;"></span> 是图片被隐藏掉的部分；
<span style="display:inline-block; width:3em; height:2em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6); vertical-align:middle;"></span> 是实际显示区域。

===cover（默认）===
*<code><nowiki>{{背景图片区域|……}}</nowiki></code>
*或<code><nowiki>{{背景图片区域|mode=cover|……}}</nowiki></code>
图片填充整个内容框。如果图片的宽高比与内容框不相匹配，该图片将被剪裁以适应内容框。

<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:16em; height:9em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="width:10em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

<div style="width:10em; height:14em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; flex-direction:column; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

</div>

===contain===
*<code><nowiki>{{背景图片区域|mode=contain|……}}</nowiki></code>
图片整体在内容框内，在此前提下缩放至最大。

<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:10em; height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6); margin:1em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb) center/100% 6.5625em no-repeat">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>

<div style="width:10em; height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6); margin:1em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb) center/6.4286em 100% no-repeat">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>

</div>

===fixed===
*<code><nowiki>{{背景图片区域|mode=fixed|……}}</nowiki></code>
图片大小固定，需要自己设定图片[[#图片大小|大小]]和[[#图片位置|位置]]。

<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:12em; margin:1em; background:left top/12em 6.75em no-repeat; background-image:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),linear-gradient(to right,#e8c4dd,70%,#b9d9fc);">
<div style="display:table; width:10em; height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6); background:linear-gradient(to right,#e2b5d4,70%,#a7cffb) left top/12em 6.75em no-repeat;">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
</div>

<div style="width:16em; height:9em; margin:1em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb) left top/12em 6.75em no-repeat; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>

</div>

====图片大小====
*<code>width</code>
*<code>height</code>
分别控制图片的长宽，单位是px（即只用填数字，不带单位）。两者只用填一个，另一个会自动计算。

====图片位置====
使用<code>图片样式</code> / <code>imgstyle</code>控制位置。
*<code>|imgstyle=</code>
**[https://developer.mozilla.org/zh-CN/docs/Web/CSS/top <code>top: …;</code>]
**[https://developer.mozilla.org/zh-CN/docs/Web/CSS/left <code>left: …;</code>]
**[https://developer.mozilla.org/zh-CN/docs/Web/CSS/right <code>right: …;</code>]
**[https://developer.mozilla.org/zh-CN/docs/Web/CSS/bottom <code>bottom: …;</code>]
<div style="display:grid; grid-template:1fr 2fr 1fr/1fr 2fr 1fr; grid-template-areas:'. t .' 'l c r' '. b .'; max-width:23em; height:14em; margin:1em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="grid-area:t; display:flex; justify-content:center;"><div style="width:.1em;background:#8c4fba"></div><code style="align-self:center;">top</code></div>
<div style="grid-area:l; display:flex; flex-direction:column; justify-content:center;"><div style="height:.1em;background:#8c4fba"></div><code style="align-self:center;">left</code></div>
<div style="background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); grid-area:c"></div>
<div style="grid-area:r; display:flex; flex-direction:column; justify-content:center;"><div style="height:.1em;background:#8c4fba"></div><code style="align-self:center;">right</code></div>
<div style="grid-area:b; display:flex; justify-content:center;"><div style="width:.1em;background:#8c4fba"></div><code style="align-self:center;">bottom</code></div>
</div>
值是[https://developer.mozilla.org/zh-CN/docs/Web/CSS/length CSS长度]或百分数，可以是负值。与<code>width</code>和<code>height</code>参数不同的是，这个需要带单位，单位有px、em、%等。

一般情况下指定其中一到两个CSS属性即可。同时指定了<code>top</code>与<code>bottom</code>，或<code>left</code>与<code>right</code>时，效果可参考[https://developer.mozilla.org/zh-CN/docs/Web/CSS/position MDN上<code>position</code>的说明文档]。

====fixed模式示例====
'''示例1：居左下'''
<pre>{{背景图片区域
|mode=fixed
|background=Moegirl is watching you.jpg
|width=80
|imgstyle=left:0; bottom:0;
|1=（示例文字）
}}</pre>
{{背景图片区域
|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：居正中'''
<pre>{{背景图片区域
|mode=fixed
|background=Moegirl is watching you.jpg
|width=80
|imgstyle=left:50%; top:50%; transform:translate(-50%,-50%);
|1=（示例文字）
}}</pre>
{{背景图片区域
|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.
}}
注意到上面使用了<code>transform:translate(-50%,-50%)</code>，是因为仅用<code>left:50%</code>和<code>top:50%</code>时，实际上是图片左上顶点在正中央，使用[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform <code>transform</code>]使其向左上移动自身的50%，这样图片就在正中央了。

==其他参数==
===<kbd>区域样式</kbd> / <kbd>areastyle</kbd>===
:对整个背景图片区域添加样式，如设置大小、边框等。

===<kbd>图片样式</kbd> / <kbd>imgstyle</kbd>===
:对图片添加额外的CSS进行修饰。
:'''注意：'''为了移动端的兼容性，该样式实际上添加在<code>&lt;img&gt;</code>标签外部的<code>&lt;div&gt;</code>容器上，因此部分参数无法生效。

;使用例1：
添加<code>opacity</code>样式更改透明度。

<pre>{{背景图片区域|背景=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|图片样式=opacity:0.4|（示例文字）}}</pre>
{{背景图片区域|背景=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg|图片样式=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：
添加<code>background</code>样式<ref group="imgstyle">此样式不是模板参数中的<code>background</code> / <code>背景</code></ref>，改变图片尚未加载（或加载失败）时的背景颜色，避免突兀。

例如，对于本图片，可以使用：
<pre>{{背景图片区域|background=VirtuaReal%E5%90%88%E5%BD%B1202111.jpg
|imgstyle=background:linear-gradient(to right, #e2b5d4, 70%, #a7cffb)
|（示例文字）}}</pre>

图片尚未加载或加载失败时，效果将会是：
{{背景图片区域|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.}}

<references group="imgstyle"/>
----

===<kbd>位置</kbd> / <kbd>position</kbd>===
:使用[[#cover|cover]]或[[#contain|contain]]模式时，控制图片对齐位置，默认在中央。
:{{注意|注意：}}该参数在移动端网页不生效。

在<code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code>、<code>center</code>选择一到两个关键字。例如：

'''<code>|position=top</code>'''（或<code>|position=top center</code>、<code>|position=center top</code>，顺序不重要）
<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:16em; height:9em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="width:10em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

<div style="width:10em; height:14em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; flex-direction:column; margin:1em;">
<div style="height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

</div>

'''<code>|position=right</code>'''（或<code>|position=center right</code>、<code>|position=right center</code>，顺序不重要）
<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:16em; height:9em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="width:10em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
</div>

<div style="width:10em; height:14em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; flex-direction:column; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

</div>

'''<code>|position=bottom left</code>'''或'''<code>|position=left bottom</code>'''（顺序不重要）
<div style="display:flex; flex-wrap:wrap; align-items:center;">

<div style="width:16em; height:9em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; margin:1em;">
<div style="width:10em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
</div>

<div style="width:10em; height:14em; background:linear-gradient(to right,#e2b5d4,70%,#a7cffb); display:flex; flex-direction:column; margin:1em;">
<div style="background:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 6px),rgba(255,255,255,.2); flex:1;"></div>
<div style="height:9em; box-shadow:0 0.05em 0.3em rgba(20,20,20,.6);">
<div style="height:.5em; width:6em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:5em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:4em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:7em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
<div style="height:.5em; width:2em; background-color:rgba(42,42,42,.6); margin:.9em .8em;"></div>
</div>
</div>

</div>

参数还可以是其他形式，详见[https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position MDN的<code>object-position</code>]。
----

===<kbd>imgclass</kbd>===
:设置图片的<code>class</code>。
:设置为<code>nomobile</code>，可使图片在移动端不可见；
:设置为<code>mobileonly</code>，可使图片仅在移动端可见。
----

===<kbd>custombg</kbd>===
:自定义背景，可以在里面写wikitext（及HTML）。链接自然不能点。

'''示例：'''
<pre>{{背景图片区域
|custombg=想啊，很想啊！
|imgstyle=font-size:5em; font-weight:bold; opacity:.3;
|（示例文字）
}}</pre>
{{背景图片区域
|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.}}

{{图像模板}}