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

{{info|注意：该模板因兼容性问题在IE浏览器下会导致图片不能以原始宽高比显示，而是以拉伸的方式铺满全屏。|type=none}}
{{info|{{color|red|<big>'''请模板使用者注意：请尽量使用像素不低于1920*1080的位图图片，以保证在各种分辨率的设备上都不会出现图片被强行放大后模糊的情况。'''</big>}}|type=none}}
{{info|{{color|red|请模板使用者注意：请尽量不要使用webp格式图片，以保证Safari用户正常查看。}}|type=none}}
== 介绍 ==

该模板将在保证覆盖背景且不改变原始宽高比的情况下尽可能合适地显示背景图片。

=== 缩放与显示规则 ===

该模板会以图片宽或高中较小的一个为准，将图片等比例缩放至与窗口相同宽度/高度，使图片完全覆盖窗口。

下面的示例中：'''深蓝'''代表完整图片，'''浅蓝'''为窗口，也就是说在除了少数图片宽高比完全契合设备(窗口)宽高比的情况下，大部分时候图片是不能完整显示的。

<div style="display:flex">

<div style="width:200px; height:100px; background:#1E90FF; border:5px #ccc solid; float:left;">
  <div style="width:80%; height:100%; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; margin:0 auto; display:flex; justify-content:center; align-items:center; color:white;">使用横向图片时</div>
</div>

<div style="width:160px; height:240px; background:#1E90FF; border:5px #ccc solid; display:flex; align-items:center; margin-left:20px;">
  <div style="width:100%; height:100px; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; display:flex; justify-content:center; align-items:center; color:white;">使用纵向图片时</div>
</div>

</div>

=== 注意 ===
* 请将这个模板置于条目页底<small>（而不是页顶）</small>，否则更新姬将会抓取本模板中的图片当成条目配图推送。
* 请将这个模板置于条目的<code><nowiki>== 外部链接 ==</nowiki></code>之上。
* 请尽量使用像素不低于1920*1080的位圖圖片，以保证在各种分辨率的设备上都不会出现图片被强行放大后模糊的情况。

== 使用方式 ==
参数：
* url：图片的地址，内外链均可。
* displaylogo：替换背景图后显示萌百logo，默认开启（<code>yes</code>），可以手动关闭（传入<code>no</code>）。一般不推荐隐藏。
* color：用于设置一个以颜色值定义的背景颜色，该参数设置的背景颜色会被url的图片所覆盖。即使在使用图片时也可以设置该值，这可能在某种程度上会缓解由于背景图片的突然显示所造成的突兀感（在图片加载完之前会显示背景颜色）。
* position：用于对背景图片进行定位，默认为居中显示(见[[#缩放与显示规则]]中的示例)，常用的定位可以参考使用下列值：
** 【top】：优先上方显示（这通常用于竖向图片）
** 【bottom】：优先下方显示（这通常用于竖向图片）
** 【left】：优先左部分显示（这通常用于横向图片）
** 【right】：优先右部分显示（这通常用于横向图片）
:如需精确调节，请使用<code>x轴偏移 y轴偏移</code>这种写法，偏移以图片左上角为基点，常用的单位有百分比(%)或像素(px)。当使用百分比时，100%是缩放后图片宽或高较大一边减去视口相同边的剩余空间，也就是说，设置0~100%都不会使图片过度偏移，露出萌百网站原始的背景。另外，使用百分比单位时横图设置y轴偏移无效，竖图设置x轴偏移无效，其他单位没有此限制。x和y可以使用不同的单位，也可以使用关键字(top、bottom、left、right)。示例见：[[#示例7]]
:position的参数值实际上就是传给了CSS的object-position属性，更多信息请查看[https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position MDN中对于CSS3属性object-position的介绍]。
* shade：设置背景图片的'''颜色叠加层不透明度'''，默认为0，可选值为0到1。
* shadeColor：设置叠加层的颜色，默认为白色。
* animate：赋予背景图片一个简单的动画效果，这个效果将在图片加载完成后播放，默认值为<code>show</code>。该参数不局限于下面所列出的值，可以自由实现(利用[https://www.mediawiki.org/wiki/Extension:TemplateStyles Templatestyles])并填写。
** 【none】：不使用动画
** 【show】：从透明转为不透明（不透明度100%）
** 【shrink】：大小由115%转为100%
** 【clear】：由模糊转为清晰
** 【appear】：大小由130%转为100% + 从透明转为不透明
** 【look】：视角变化，图片高度越大越明显。当position为bottom时，视角变化为（下 => 上 => 下），其他情况均为（上 => 下 => position参数的值），也可以使用【look-top】或【look-bottom】强制指定。注意，若在图片经过适应屏幕宽度后，发生了图片高度小于设备高度的情况（这时图片会进行放大以占满屏幕高度），则该效果会变成“以屏幕左上角为基点进行缩小（150% => 100%）”。
* action：规定动画如何进行，相当于CSS的<code>animation</code>属性值中从第二个位置开始的值，不填将使用默认值。
* make：该参数允许你对一个占据背景空间的透明div设置样式（如一些复杂的渐变色函数技术），将其作为背景使用。
* style：对背景图片添加css样式，注意如果和模板定义的样式发生重复，将会覆盖掉模板的对应css样式，建议在阅读模板源码后使用。

=== 替换logo ===
在使用该模板添加背景图片后，屏幕左上角会出现替代的萌百logo。你也可以选择使用一个自定义图片替换这个logo（一般不推荐这样做）。

* logo-url：logo图片的地址，内外链均可。
* logo-size：控制logo大小。如果传入一个值，则这个值指定logo的宽度；如果传入两个值（用空格分隔），则第一个值指定logo的宽度，第二个值指定logo的高度；如果传入关键字cover，则缩放图片使之能完全覆盖logo区域，可能图片部分看不见；如果传入关键字contain，则缩放图片使之能完全装入logo区域，可能logo区域部分空白。
* logo-position：在这里填入两个css长度，只能以像素为单位，比如“-10px -17px"等，如果格式不对将不会起效。此参数设置的是图片偏移值，以原logo左上角为原点，向右为x轴正方向，向上为y轴正方向，此参数的两个值分别设置新的logo的左上角的横竖坐标。

== 简写 ==

若只填写图片路径，则可以使用如下写法：

<pre>
{{背景图片|在这里填写图片链接}}
</pre>

== 示例 ==
=== 示例{{n|init}} ===

将一个图片作为背景，全部使用默认值。

<pre>
{{背景图片|あそびあそばせ.jpg}}
</pre>

=== 示例{{n}} ===

将一个颜色作为背景。

<pre>
{{背景图片|color=red}}
</pre>

=== 示例{{n}} ===

将一个图片作为背景，并添加一个背景颜色，以减少在图片加载时所产生的视觉上的突兀，同时规定动画效果为“appear”。

<pre>
{{背景图片
|url= あそびあそばせ.jpg
|color= #80DBB0
|animate= appear
}}
</pre>

=== 示例{{n}} ===

将一个图片作为背景，并添加黄色遮罩。

<pre>
{{背景图片
|url= あそびあそばせ.jpg
|shade= 0.5
|shadeColor= yellow
}}
</pre>

=== 示例{{n}} ===

假设自定义实现了一个动画“fromBottom”，并使用。

<pre>
/* Example/styles.css */

@keyframes fromBottom {
  from {
    margin-top: 100vh;
  }
}
</pre>

<pre>
<templatestyles src="Example/styles.css" />

{{背景图片
|url=あそびあそばせ.jpg
|animate= fromBottom
|action= 0.3s ease
}}
</pre>

=== 示例{{n}} ===

使用“make”参数画一个背景。

<pre>
{{背景图片
|make= background:linear-gradient(red, blue)
}}
</pre>

=== 示例{{n}} ===

使用“position”参数精确控制背景图片位置。

<pre>
{{背景图片|url=横图.jpg|position=0 50%}}  <!-- 这相当于left -->
{{背景图片|url=横图.jpg|position=100% 50%}}  <!-- 这相当于right -->
{{背景图片|url=竖图.jpg|position=50% 0}}  <!-- 这相当于top -->

{{背景图片|url=竖图.jpg|position=50% 30%}}  <!-- 偏移y轴剩余空间的30% -->
{{背景图片|url=竖图.jpg|position=9999% 30%}}  <!-- 当使用竖图时设置x轴的百分比无效，这里设置了多少也不会生效 -->
</pre>

== 其他 ==
*{{tl|替换侧边栏底图}}

{{图像模板}}
<noinclude>[[Category:模板说明文件]]</noinclude>