如果你看到本段文字，说明该页面未正常加载全局JS，部分功能将无法使用，请点击 刷新 重新加载页面。

全站通知：

模板:Cssbg

来自咸鱼之王WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

生成一段样式代码，用户可以将指定文件变成指定容器的背景图片。

你需要指定一个文件名（不包含文件:部分）和对应class。该模板会将该文件的URL填入对应class样式的background-image属性中。

注意：使用这种方法呈现的图片无法被搜索引擎抓取。

更新记录

20180129
  • 解决了encode与之前版本有差异的问题。

原理

  1. 该模板将使用BWIKI的{{filepath:}}魔术字获取指定文件的URL，并和用户定义的class传递给widget:cssbg模板。
  2. widget模板接收后会对该url进行解码处理（传递到widget模板的URL因某种原因会被编码），然后输出成一段样式。
  3. 用户为指定的容器增加相同的class后，上述样式即生效。

示范

以下示范中使用的图片仅在咸鱼之王WIKI生效。

效果

这行文字所在容器的class值为Cssbg。

wikitext代码

{{cssbg|file=立绘·吕布.png|class=Cssbg}}
<div style="height:240px;background-size:cover;border:1px solid #aaaaaa;">这行文字所在容器的class值为Cssbg。</div>
此处额外为该元素固定了高度、设置了背景填充方式和描边。

生成的CSS代码段示范

.Cssbg {
    background-image:url(/*指定文件的url*/)

CSS提示

  • 该模板仅定义了background-image，因此你可能需要单独单独写其他background类样式。
  • 相同class的容器之间共享样式，这种情况下你只需要调用一次本模板，但需要为多个容器添加class。
  • 上文的例子中使用了background-size:cover样式。此样式下，背景图片会尝试放大到能覆盖整个背景（有一部分会被裁切）。你也可以使用background-size:contain，使该图片在不被裁切的情况下尽可能放大。
  • 其他background类属性还包括-attachment，-position，-repeat等，此处不再赘述。
所有模板列表
取自“https://wiki.biligame.com/xyzwgame/index.php?title=模板:Cssbg&oldid=12689”