在上一篇中, 有提到了背景色的設定方法, 這次就來說說背景圖的設定方式
語法如下
預設值是 none , 而 inherit 則是繼承的意思, 也就是要比照上層標籤的設定, 應該在所有屬性上都會有這個值, 所以下次我就不再說明這個值的意思囉
在這個屬性值上, 若要設定使用圖片, 就要透過 url() 這個函數來指定圖片的網址, 例如
在 () 括號內有沒有用單引號或雙引號將圖片網址括住都可以, 這裡的 URL 也可以使用相對路徑
註:我們還沒講到獨立的 CSS 樣式檔, 不過這裡先提醒一下, 若是使用 CSS 樣式檔, 那麼相對路徑要以 CSS 樣式檔所在位置為準
當設定了 background-image 屬性, 且沒有設定其他屬性時, 預設是會用該指定的圖片, 像貼磁磚一樣, 重覆貼滿整個標籤範圍, 因此, 像上例中我們是設定在 BODY 上, 就會貼滿整個頁面, 若是設定在其他標籤, 則會貼滿該標籤所佔的範圍
若我們不想要重覆貼滿, 則我們可以搭配下面的屬性來設定
預設是 repeat , 也就剛剛說的會貼滿整個範圍
repeat-x 則是只往右邊重覆貼滿, 往下則不會
repeat-y 則只會往下貼滿, 往右不會
no-repeat 表示完全不要重覆, 圖片只會出現一次
例如
上例中, 我們用一個 TABLE 劃分四個區域, 在左上、右上、左下、右下等 TD 中, 分別設定為 repeat、repeat-x、repeat-y、no-repeat, 你可藉由點擊 [觀看執行結果] 按鈕, 即可看到它們所呈現的效果
註：上面的 x 與 y , 其實就是類似座標的意思, 在網頁中, 橫的方向叫 x 軸, 往右座標值愈大, 縱的方向叫 y 軸, 往下座標值愈大, 以後還會有其他屬性用到這個觀念
另外, 我們也可以設定圖片的位置, 語法如下
水平位置的值可以是 percentage | length | left | center | right
垂直位置的值可以是 percentage | length | top | center | bottom
兩個值中間以空格隔開
percentage就是你可以使用百分比, 表示希望底圖位於標籤範圍中什麼樣的比例位置
length則是可以指定一個較明確地的位置, 可以使用 CSS 長度單位
其他 left、right、top、bottom、center 等, 都是關鍵字, 如同字面意思一樣, 底圖會位在你所指定的位置上
例如
若只給一個位置值, 且是給 percentage | length | left | center | right 等值
, 則會認定為是設定水平位置, (這裡要注意的是 percentage | length )
若只給一個位置值, 且是給 top | center | bottom 等值, 則會認定為是設定垂直位置
例如
還有, 我們在有些網站上, 可以發現它的底圖不會跟著 scrollbar 捲動, 這也是可以用 CSS 樣式來設定的, 語法如下
預設值是 scroll , 就是底圖會跟著 scrollbar 捲動
fixed 則是要固定不動, 大部份會做此設定的是使用一張大底圖, 且不重覆貼滿的, 例如一張照片或圖畫等
例如下面兩個例子, 上面的是不做 background-attachment 設定的, 下面的是有將 background-attachment 設為 fixed 的, 你可以點 [觀看執行結果] , 來看看兩者的差異
最後提醒一下, 用做底層的圖片, 除非做適當的配置, 否則顏色不宜太過強烈, 通常會比較淡一點, 否則我們網頁上的文字就會看不清楚
--gs--
{HTML基本教學 背景}{背景色}
語法如下
預設值是 none , 而 inherit 則是繼承的意思, 也就是要比照上層標籤的設定, 應該在所有屬性上都會有這個值, 所以下次我就不再說明這個值的意思囉
在這個屬性值上, 若要設定使用圖片, 就要透過 url() 這個函數來指定圖片的網址, 例如
在 () 括號內有沒有用單引號或雙引號將圖片網址括住都可以, 這裡的 URL 也可以使用相對路徑
註:我們還沒講到獨立的 CSS 樣式檔, 不過這裡先提醒一下, 若是使用 CSS 樣式檔, 那麼相對路徑要以 CSS 樣式檔所在位置為準
當設定了 background-image 屬性, 且沒有設定其他屬性時, 預設是會用該指定的圖片, 像貼磁磚一樣, 重覆貼滿整個標籤範圍, 因此, 像上例中我們是設定在 BODY 上, 就會貼滿整個頁面, 若是設定在其他標籤, 則會貼滿該標籤所佔的範圍
若我們不想要重覆貼滿, 則我們可以搭配下面的屬性來設定
預設是 repeat , 也就剛剛說的會貼滿整個範圍
repeat-x 則是只往右邊重覆貼滿, 往下則不會
repeat-y 則只會往下貼滿, 往右不會
no-repeat 表示完全不要重覆, 圖片只會出現一次
例如
上例中, 我們用一個 TABLE 劃分四個區域, 在左上、右上、左下、右下等 TD 中, 分別設定為 repeat、repeat-x、repeat-y、no-repeat, 你可藉由點擊 [觀看執行結果] 按鈕, 即可看到它們所呈現的效果
註：上面的 x 與 y , 其實就是類似座標的意思, 在網頁中, 橫的方向叫 x 軸, 往右座標值愈大, 縱的方向叫 y 軸, 往下座標值愈大, 以後還會有其他屬性用到這個觀念
另外, 我們也可以設定圖片的位置, 語法如下
水平位置的值可以是 percentage | length | left | center | right
垂直位置的值可以是 percentage | length | top | center | bottom
兩個值中間以空格隔開
percentage就是你可以使用百分比, 表示希望底圖位於標籤範圍中什麼樣的比例位置
length則是可以指定一個較明確地的位置, 可以使用 CSS 長度單位
其他 left、right、top、bottom、center 等, 都是關鍵字, 如同字面意思一樣, 底圖會位在你所指定的位置上
例如
若只給一個位置值, 且是給 percentage | length | left | center | right 等值
, 則會認定為是設定水平位置, (這裡要注意的是 percentage | length )
若只給一個位置值, 且是給 top | center | bottom 等值, 則會認定為是設定垂直位置
例如
還有, 我們在有些網站上, 可以發現它的底圖不會跟著 scrollbar 捲動, 這也是可以用 CSS 樣式來設定的, 語法如下
預設值是 scroll , 就是底圖會跟著 scrollbar 捲動
fixed 則是要固定不動, 大部份會做此設定的是使用一張大底圖, 且不重覆貼滿的, 例如一張照片或圖畫等
例如下面兩個例子, 上面的是不做 background-attachment 設定的, 下面的是有將 background-attachment 設為 fixed 的, 你可以點 [觀看執行結果] , 來看看兩者的差異
最後提醒一下, 用做底層的圖片, 除非做適當的配置, 否則顏色不宜太過強烈, 通常會比較淡一點, 否則我們網頁上的文字就會看不清楚
--gs--
{HTML基本教學 背景}{背景色}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除