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;
}

更多链接

帮助及反馈

除了特别提示,社区内容遵循CC-BY-SA 授权许可。

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+