位置：首頁 > 軟件操作教程 > UI設(shè)計(jì)軟件 > Adobe Dreamweaver > 問題詳情

Dreamweaver CC 2014如何定義背景樣式？

提問人：劉旭39發(fā)布時(shí)間：2020-11-11

定義背景樣式

使用“頁面屬性”對話框可以定義網(wǎng)頁背景顏色和背景圖像，實(shí)際就是利用CSS為<body>標(biāo)簽

【操作步驟】

第 1 步，啟動(dòng) Dreamweaver CC，打開orig.html 文件，另卷為 effect.html。

第2步，選擇“插入” 結(jié)構(gòu)” |Div命令，打開“插入Div標(biāo)簽”對話框，忽略該對話框設(shè)置， 直接單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，設(shè)置選擇器類型為“ID (僅應(yīng)用 于一個(gè)HTML元素）”，并把樣式保存在文檔內(nèi)部，設(shè)置“規(guī)則定義”為“（僅限該文檔）”。

第3步，單擊“確定”按鈕，打開CSS規(guī)則定義對話框，在左側(cè)“分類”列表框中選擇“背景” 選項(xiàng)，然后在右側(cè)選項(xiàng)區(qū)域設(shè)置背景CSS樣式，如圖所示。image.png

(1) Background-color (背景顏色）下拉列表框：設(shè)置指定頁面元素的背景色。

(2) Background-image (背景圖像）下拉列表框：設(shè)置指定頁面元素的背景圖像。單擊“瀏覽，， 按鈕可以方便地選擇圖像。如果同時(shí)定義背景顏色和背景圖像，則只顯示背景圖像效果；如果沒有發(fā) 現(xiàn)背景圖像，才會(huì)顯示背景顏色。

(3) Background-repeat (重復(fù)）下拉列表框：設(shè)置當(dāng)使用圖像作為背景時(shí)是否需要重復(fù)顯示， 包括以下4個(gè)選項(xiàng)。

 no-repeat (不重復(fù)）：表示只在應(yīng)用樣式的元素中顯示一次該圖像。

 repeat (重復(fù)）：表示在應(yīng)用樣式的元素背景上的水平方向和垂直方向上重復(fù)顯示該圖像。

 repeat-x (橫向重復(fù)）：表示在應(yīng)用樣式的元素背景上的水平方向上重復(fù)顯示該圖像。

 repeat-y (縱向重復(fù)）：表示在應(yīng)用樣式的元素背景上的垂直方向上重復(fù)顯示該圖像。

⑷Background-attachment (附件）下拉列表框:包括fixed (固定）和scroll (滾動(dòng))兩個(gè)選項(xiàng), 用來設(shè)置元素的背景圖是隨對象內(nèi)容滾動(dòng)的還是固定的=fixed選項(xiàng)為固定，scroll選項(xiàng)為滾動(dòng)。注意 —些瀏覽器會(huì)將固定方式始終作為滾動(dòng)方式處理，如IE7及其以下版本的瀏覽器。

(5) Background-position(X) C水平位置）下拉列表框：設(shè)置背景圖像相對于應(yīng)用樣式的元素的 水平位置，包括left (左對齊)、right (右對齊）和center (居中對齊）選項(xiàng)，也可以直接輸入數(shù)值。 如果輸入數(shù)值，還可以在右邊的下拉列表框中選擇數(shù)值單位，常用單位為px。如果前面的 Background-attachment設(shè)置為fixed，則元素的位置是相對于文檔窗口，而不是元素本身的。

(6) Background-position(Y)(垂直位置）下拉列表框：設(shè)置背景圖像相對于應(yīng)用樣式的元素的 垂直位置，包括top (頂部）、bottom (底部）和center (居中對齊）選項(xiàng)，也可以直接輸入數(shù)值，并 在右邊的下拉列表框中選擇數(shù)值單位。如果前面的Background-attacinment設(shè)置為fixed,則元素的位 置是相對于文檔窗口，而不是元素本身的。

例如，在“背景”選項(xiàng)中選擇一張背景圖像，設(shè)置Background-repeat為no-repeat、Background- position(X)和 Background-position(Y)都為 center。

第4步，定義完畢后，單擊“確定”按鈕關(guān)閉對話框，回到文檔編輯狀態(tài)，保存文件，按F12 鍵在瀏覽器中預(yù)覽網(wǎng)頁。

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部