微魔方圖片組件

在設計頁面時(shí)，圖片組件是最常用(yòng)的(de)組件之一。打開微魔方設計器，選擇“圖片”組件拖拽至畫(huà)布，得(de)到如下(xià)圖所示的(de)一個(gè)圖片組件：

點擊“編輯”按鈕進入設置面闆。默認設置裏包含背景、邊框、陰影(yǐng)的(de)設置，具體設置請參考組件常見設置。點擊下(xià)圖紅框處的(de)“懸停”标簽，進入圖片懸停設置。

懸停設置面闆包含懸停蒙版、懸停圖标以爲懸停文字的(de)設置。通(tōng)過點擊“懸停蒙版”後面的(de)勾選按鈕，可(kě)設置是否顯示蒙版。蒙版背景、圖标、标題文字樣式的(de)設置，請參考組件常見設置。如果您需要設置半透明(míng)的(de)蒙版，可(kě)使用(yòng)純色背景，手動輸入“rgba(0,0,0,x)”,X 的(de)值爲0 ~ 1之間的(de)小數時(shí)，背景将會變成透明(míng)的(de)黑(hēi)色蒙版。

如果您需要更改圖片，打開組件屬性面闆後，點擊右側邊欄的(de)“内容”标簽，出現如下(xià)圖所示的(de)内容編輯面闆：

點擊“更換圖片”後，彈出如下(xià)所示的(de)圖庫選擇框，在圖庫裏您可(kě)以選擇使用(yòng)“資源庫”的(de)圖片或者自己“上傳資源”。“資源庫”是微魔方建站平台免費提供的(de)圖片庫，裏面包含了(le)許多(duō)類型的(de)精美(měi)圖片。“附件庫”内的(de)資源，是您上傳的(de)圖片。點擊分(fēn)類後面的(de)“+”，可(kě)添加圖片分(fēn)類。圖片默認按照(zhào)上傳時(shí)間倒叙排序，您可(kě)以更改排序爲按照(zhào)名稱排序。如果圖片比較多(duō)，您還(hái)可(kě)以使用(yòng)圖片名稱進行搜索。

在圖庫選擇“上傳資源”以後，出現如下(xià)所示的(de)上傳界面。圖片上傳支持拖動圖片至上傳區(qū)域，每次最多(duō)可(kě)同時(shí)上傳50張圖片。

我們也(yě)支持使用(yòng)遠(yuǎn)程圖片，如果您知道圖片地址，點擊下(xià)圖所示的(de)“遠(yuǎn)程資源”按鈕，輸入正确的(de)圖片地址，點擊确定完成操作。

選好圖片以後，我們可(kě)更改圖片的(de)标題、描述和(hé)鏈接地址。我們還(hái)可(kě)對(duì)圖片的(de)顯示方式做(zuò)一些微調，目前圖片支持自适應、居中、拉伸和(hé)原圖四種顯示模式。

自适應：圖片根據您的(de)圖片組件大(dà)小，自動調整顯示的(de)大(dà)小，如上圖所示。

居中：圖片根據您的(de)圖片組件大(dà)小及圖片原圖的(de)比例，選擇橫向或者豎向縮放圖片。

拉伸：圖片根據組件大(dà)小，改變自身比例，自動填滿控件。

原圖：圖片根據原圖大(dà)小，自動調整組件大(dà)小，顯示原尺寸的(de)圖片。