請使用本主題了解如何使用 CSS 設計工具面板,將漸層套用至您的網頁背景並進行編輯。
您可使用「CSS 設計工具」面板,將漸層套用至網站的背景。背景類別提供漸層屬性。
按一下漸層屬性旁的 以開啟「漸層」面板。此面板可供您:
現在讓我們來探討下列程式碼:
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%)
Dreamweaver 中僅支援色標的「%」值。如果您使用 as、px 或 em 等其他值,Dreamweaver 會將其讀取為「nil」。此外,Dreamweaver 也不支援 CSS 色彩;如果您在程式碼中指定這些色彩,Dreamweaver 將讀取為「nil」。
使用漸層做為背景時,您可將 Dreamweaver 設定為會在不同的網頁瀏覽器上適當地呈現漸層。Dreamweaver 會在程式碼中加入恰當的廠商前置詞,讓網頁瀏覽器適當地顯示漸層。
Dreamweaver 可寫入下列的廠商前置詞以及 w3c 格式:
依照預設,Dreamweaver 會寫入 Webkit 和 Dreamweaver 即時檢視的廠商前置詞。您可從「偏好設定」對話框選擇其他的必要廠商 (「偏好設定 > CSS 樣式」)。
產生「方框」陰影時,不論您是否在「偏好設定」中選取了 Webkit 和 w3c 前置詞,一定會產生這些前置詞。
對漸層進行的任何變更也會反映在廠商特定的語法中。如果要在 Dreamweaver CC 中開啟包含廠商特定語法的現有檔案,請確保在「偏好設定」選擇了必要的廠商前置詞。因為,當您使用或變更漸層時,Dreamweaver 依預設只會更新與 Webkit 和及 Dreamweaver 即時檢視相關的程式碼;所以,程式碼中的其他廠商特定的語法就不會更新。
只需按一下滑鼠,即可變更背景影像和漸層的順序 (程式碼中的顯示方式)。
在 CSS 設計工具中,按一下 url 或 gradient 屬性旁的箭頭。
Dreamweaver CC 包含調換背景功能的基本實作。當您擁有多個值或影像時,調換可能無法依預期運作。此外,假設您先對背景套用一個影像,再套用第二個影像,然後又套用漸層。調換漸層所產生的順序如下:漸層、第二個影像、第一個影像。
登入您的帳戶