H萌娘衷心希望身在疫区的编辑和读者保重身体。愿世界新型冠状病毒肺炎疫情早日结束!

模板:背景图片

From H萌娘
Jump to: navigation, search
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]
Icon-info.png
注意:该模板因兼容性问题在IE浏览器下会导致图片不能以原始宽高比显示,而是以拉伸的方式铺满全屏。

介绍

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

注意:

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

使用方式

参数:

  • url:图片的地址,内外链均可。
  • displaylogo:替换背景图后显示萌百logo,默认开启(yes),可以手动关闭(传入no)。一般不推荐隐藏。
  • color:用于设置一个以颜色值定义的背景颜色,该参数设置的背景颜色会被url的图片所覆盖。即使在使用图片时也可以设置该值,这可能在某种程度上会缓解由于背景图片的突然显示所造成的突兀感(在图片加载完之前会显示背景颜色)。
  • position:用于对背景图片进行定位,默认为居中显示,常用的定位可以参考使用下列值:
    • 【top】:优先上方显示(这通常用于横向图片)
    • 【bottom】:优先下方显示(这通常用于横向图片)
    • 【left】:优先左部分显示(这通常用于竖向图片)
    • 【right】:优先右部分显示(这通常用于竖向图片)
更多用法请查看MDN中对于CSS3属性object-position的介绍
  • shade:设置背景图片的颜色叠加层不透明度,默认为0,可选值为0到1。
  • shadeColor:设置叠加层的颜色,默认为白色。
  • animate:赋予背景图片一个简单的动画效果,这个效果将在图片加载完成后播放,默认值为show。该参数不局限于下面所列出的值,可以自由实现(利用Templatestyles)并填写。
    • 【none】:不使用动画
    • 【show】:从透明转为不透明(不透明度100%)
    • 【shrink】:大小由115%转为100%
    • 【clear】:由模糊转为清晰
    • 【appear】:大小由130%转为100% + 从透明转为不透明
    • 【look】:视角变化,图片高度越大越明显。当position为bottom时,视角变化为(下 => 上 => 下),其他情况均为(上 => 下 => position参数的值),也可以使用【look-top】或【look-bottom】强制指定。注意,若在图片经过适应屏幕宽度后,发生了图片高度小于设备高度的情况(这时图片会进行放大以占满屏幕高度),则该效果会变成“以屏幕左上角为基点进行缩小(150% => 100%)”。
  • action:规定动画如何进行,相当于CSS的animation属性值中从第二个位置开始的值,不填将使用默认值。
  • make:该参数允许你对一个占据背景空间的透明div设置样式(如一些复杂的渐变色函数技术),将其作为背景使用。

在使用该模板添加背景图片后,屏幕左上角会出现替代的萌百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的左上角的横竖坐标。

简写

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

{{背景图片|在这里填写图片链接}}

示例

示例1

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

{{背景图片|あそびあそばせ.jpg}}

示例2

将一个颜色作为背景。

{{背景图片|color=red}}

示例3

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

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

示例4

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

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

示例5

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

/* Example/styles.css */

@keyframes fromBottom {
  from {
    margin-top: 100vh;
  }
}
<templatestyles src="Example/styles.css" />

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

示例6

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

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

其他