請使用本主題了解如何使用 CSS 設計工具面板,將漸層套用至您的網頁背景並進行編輯。

您可使用「CSS 設計工具」面板,將漸層套用至網站的背景。背景類別提供漸層屬性。

漸層屬性
漸層屬性

按一下漸層屬性旁的 以開啟「漸層」面板。此面板可供您:

  • 從不同的色彩模式 (RGBaHexadecimalHSLa) 選擇顏色。然後將不同的顏色組合儲存為色票。
    • 若要將新色彩重設為原始色彩,請按一下原始色彩 (K)。
    • 若要變更色票的順序,請將色票拖曳到必要的位置。
    • 若要刪除色票,請將色票拖曳出面板。
  • 使用色標建立複雜的漸層。按一下預設色標之間的任何位置,即可建立色標。若要刪除色標,請將色標拖曳出面板。
  • 指定線性漸層的角度。
  • 如果要重複圖樣,請編輯 background-repeat 屬性。
  • 將自訂的漸層儲存為色票。

現在讓我們來探討下列程式碼:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg:代表線性漸層的角度
  • rgba(255, 255, 255, 1.00):第一個色標的色彩
  • 0%:代表色標

註解:

Dreamweaver 中僅支援色標的「%」值。如果您使用 as、px 或 em 等其他值,Dreamweaver 會將其讀取為「nil」。此外,Dreamweaver 也不支援 CSS 色彩;如果您在程式碼中指定這些色彩,Dreamweaver 將讀取為「nil」。

在網頁瀏覽器中呈現漸層

使用漸層做為背景時,您可將 Dreamweaver 設定為會在不同的網頁瀏覽器上適當地呈現漸層。Dreamweaver 會在程式碼中加入恰當的廠商前置詞,讓網頁瀏覽器適當地顯示漸層。

Dreamweaver 可寫入下列的廠商前置詞以及 w3c 格式:

  • Webkit
  • Firefox
  • Opera

依照預設,Dreamweaver 會寫入 Webkit 和 Dreamweaver 即時檢視的廠商前置詞。您可從「偏好設定」對話框選擇其他的必要廠商 (「偏好設定 > CSS 樣式」)。

註解:

產生「方框」陰影時,不論您是否在「偏好設定」中選取了 Webkit 和 w3c 前置詞,一定會產生這些前置詞。

對漸層進行的任何變更也會反映在廠商特定的語法中。如果要在 Dreamweaver CC 中開啟包含廠商特定語法的現有檔案,請確保在「偏好設定」選擇了必要的廠商前置詞。因為,當您使用或變更漸層時,Dreamweaver 依預設只會更新與 Webkit 和及 Dreamweaver 即時檢視相關的程式碼;所以,程式碼中的其他廠商特定的語法就不會更新。

調換背景影像和漸層

只需按一下滑鼠,即可變更背景影像和漸層的順序 (程式碼中的顯示方式)。

在 CSS 設計工具中,按一下 urlgradient 屬性旁的箭頭。

註解:

Dreamweaver CC 包含調換背景功能的基本實作。當您擁有多個值或影像時,調換可能無法依預期運作。此外,假設您先對背景套用一個影像,再套用第二個影像,然後又套用漸層。調換漸層所產生的順序如下:漸層、第二個影像、第一個影像。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策