模板:背景图片区域/doc

来自维阿百科
< 模板:背景图片区域
霓虹灯鱼（讨论 | 贡献）2024年9月20日 (五) 10:14的版本 （创建页面，内容为“<includeonly>分类:格式模板分类:使用模板样式的模板</includeonly><noinclude>Category:模板文档</noinclude> 本模板用于将一块区…”）
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至： 导航、 搜索

本模板用于将一块区域以某张图片为背景进行填充。

由于维阿百科禁止在内联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）}}

显示：

1px

需要显示的内容

注：当需要显示的内容包含“=”时，例如{{背景图片区域|背景=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长度或百分数，可以是负值。与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|（示例文字）}}
1px

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

使用cover或contain模式时，控制图片对齐位置，默认在中央。
(ｉ)注意： 该参数在移动端网页不生效。

在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.

 
查 ·论 ·编
图像模板
帮助:上传图片 • 帮助:图像 • 帮助:外部图像 • 帮助:Imagemap
常规 / 未分组
多功能{{Image}}[模板注 1] • {{背景图片}} • {{背景图片区域}} • {{替换侧边栏底图}} • {{Emoji}}[模板注 2] • 悬浮切换{{PicHover}} • {{蒙版图片}} • {{像素图}} • {{Svg}}
裁剪 / 雪碧图
[模板注 3]
{{链接图组}} • {{Image/banner}} • {{Image-clip}} • {{Sprites}}
图像排版
{{并列图片}} • {{Multiple image}} • {{Image frame}} • 画廊{{Gallery}}[模板注 4] • 附带说明{{Plain image with caption}} • {{图注}} • 适应容器{{Fit-image}} • {{Boxed-image}} • 头像+名字{{NavChara}}[模板注 5] • 竖直滚动{{Tall image}} • 水平滚动{{Wide image}} • 图片轮播{{ActivityBanner}} • {{游戏场景展示}}
外部图像
[模板注 6]
维护
 
注释
  1. ↑ 如果只是想呈现某个图片，不应该使用此模板，而是使用Wiki自带的方法。
  2. ↑ 已过时，非特殊情况直接使用Emoji字符即可。
  3. ↑ 雪碧图/精灵图（Sprites）：将多个小图片集中到一张图片中，使用时裁剪，可减少请求次数、加快加载速度。
  4. ↑ 建议优先使用Wiki的画廊语法。
  5. ↑ {{Image/banner}}的非雪碧图+轻量化版本。
  6. ↑ 不在此分组的模板也可能能够调用外部图像。不推荐大量使用外部图像，如果需要长期使用，请将图像上传到共享站。
  7. ↑ 图片存在时调用图片，不存在时显示为链接。
  8. ↑ 保证以外链形式调用内部图像被系统标记为正在使用。
取自“https://vrp.wiki/index.php?title=模板:背景图片区域/doc&oldid=5530”