置顶公告:【置顶】关于临时开启评论区所有功能的公告(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.