FANDOM


在弹性界面下,如何能够创建最佳的背景样式?这里将指导你如何使用界面设计上傳背景圖片。

相關資訊

这里是关于弹性界面的一些信息:

  • 在小的显示屏上,比如1024px宽的iPad上,界面會使內容區域覆蓋整個銀幕,因此背景图案不会显示。
  • 在大的显示屏上(寬度大於1066px)时,背景才会显示於內容區域的兩側。
  • 內容區域的寬度到達上限的1240px之後就不會再擴大。


為了要使一張背景圖片在各種大小的銀幕都能正確顯示,圖片會均分,其中心区域(大部分被内容区域覆盖)将会被"界面设计"中的“中间背景颜色”填充。对于大屏幕来说,在底端和两侧,这个固定颜色也可以在图片的边缘侧看到。


如下图所示,社区中心的背景图片在不同屏幕尺寸显示下呈现的效果。


  • 注意:如果你不想均分你的背景图片,上传的图片宽度必须至少为2000px,此时“界面设计”中才会有“不分割”的选项显示。这样无论内容区域的尺寸为多少,背景图片都可以作为一个整体被显示出来。

創建能適用於不同大小犬幕的背景圖片並不容易,但別擔心,我們有一些能幫助你的方法:

创建背景

  1. 创建背景图片你可以使用Photoshop、GIMP或者Paint等工具来量化你的图片尺寸。

这里是背景图片的模版供大家使用。Content Space即内容区域。

BackgroundDiagram

關於這個圖片有五點编辑小贴士:

  • 圖景圖片:背景气球部分是背景圖的区域
  • 漸層: 你可以使用渐变工具,让两侧和底部逐渐融入背景颜色当中(如图片中的黑色部分所
  • 邊緣: 內容區域两侧红色部分代表大部分情況下能看到的部分。
  • 內容區域:中间半透明的灰色長方形区域为内容区域。預設是看不到背景圖,但可通过在界面設計中调整透明度讓背景可以看到。部分顯示,
  • 分割線:中間的黄色线条就是背景图片分割的位置,這一區域颜色可以在“界面设计”中调整。

这里我们提供一个Photoshop的模版供大家下载,方便背景图片的编辑使用:

{{#NewWindowLink:homepage:w:File:Background_template.psd|点击这里进行模版下载}}

建议

  • 上传的图片大小不能超过300KB,如果圖片檔案太大,請先壓縮再上傳。
  • 背景图片边缘的渐变越大,融入背景颜色的效果就更加清晰,參見漸層效果了解如何創建有漸層效果的背景圖。
  • 尽量不要将内容区域变成完全透明,因为会让文字内容阅读起来不方便
  • 製作背景時,儘量多考慮不同大小銀幕的狀況,讓使用者能更愉快地閱讀。
  • 使用谷歌或者百度引擎搜索“桌面图片”,这样可以帮助你找到更好更清晰的主题图片
  • 在制作背景图片时,合适地使用图片分辨率,这样背景图片才会更加清晰
  • 请尽量使用“界面设计”上传背景图片。如果你使用css进行背景图片的更改或者上传,由于FANDOM对系统的不断调整和升级,可能会影响你的背景图片不能正常显示,下载页面的时间也会受到影响
  • 如果你想要把背景固定在頁面底部而非預設的頂部,在你的wiki的 MediaWiki:Wikia.css加入以下代碼:
/* Bottom anchor background image */
body.background-dynamic:after,
body.background-dynamic:before {
    bottom: 0 !important;
    top: inherit !important;
}

更多链接

幫助及反饋

您使用了广告屏蔽软件!


Wikia通过广告运营为用户提供免费的服务。我们对用户通过嵌入广告屏蔽软件访问网站进行了使用调整。

如果您使用了广告屏蔽软件,将无法使用我们的服务。请您移除广告屏蔽软件,以确保页面正常加载。