網頁背景圖語法 相關
廣告上個月有 超過 1 萬 名用戶曾瀏覽 tw.strikingly.com
會打字就可以自己完成網站搭建，自帶免費網站空間、網域。 網頁設計解決方案為您量身訂製。免費架設網站和商店。
搜尋結果
其他人也問了
如何調整網頁背景顏色?
如何將網頁中圖片的內含文字也翻譯出來?
CSS 背景顏色的語法格式是什麼?
如何下載網頁中的圖片?
如何固定背景圖片?
如何讓圖片在網頁上顯示狀況?
2021年7月11日 · background系列語法. 在開始設定網頁圖片前，我們首先要建立對於背景圖片設置的基礎認識，CSS語法有提供一系列以background開頭的語法，專門用來調整網頁背景，可以分為以下幾種類型： background-image. background-clip. background-color. background-origin. background-position. background-repeat. background-size. background-attachment. 基本上，網頁的背景圖片效果都可以透過以上語法，及其各自提供的屬性實作出來，如果上面列出的屬性有你不曉得、第一次看過的，我非常建議你持續收看這系列的文章。
- Vivian Yeh
2024年10月22日 · 在網頁設計中，背景的設置是不可或缺的部分。. CSS 提供了一組強大的 background 屬性，能夠幫助我們設置元素的背景顏色、圖片、位置、大小等。. 這些屬性讓我們能夠創建豐富多樣的視覺效果。.
- 步驟一】Html 網頁架構
- 步驟二】附加 CSS 外部樣式表
- 步驟三】Css 排版 – Body
- 步驟四】Css 排版 – Box
- 步驟五】Css 排版 – Content
- 步驟六】Css 排版 – h1 標題
- 附錄一】Background 語法的縮寫方式
- 附錄二】當文字內容增加時…如何保持版型的完整性？
按照慣例，我們先從 HTML 網頁架構開始著手，請大家先參考底下圖示，建立一個新的檔案 : 比較需要注意的是， body 內設有兩個 id 選擇器(分別命名為 “BOX” 以及 “CONTENT” )，主架構則很簡單，只有 h1 標題以及 p 段落標籤。
再來，開啟一個新的 CSS 外部樣式表，並附加在 HTML 中；如下圖，樣式表檔名為「 layout.css 」。 在「 layout.css 」樣式表中，第一行請各位一樣利用匯入「 reset.css 」這個檔案來做重置歸零的動作，如果有新同學不清楚的話，歡迎參考飛肯之前的這一篇教學專文，裏頭有詳細的說明： 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》。 更不要忘記將「 reset.css 」這個檔案下載之後，與我們正在編寫的「 layout.css 」放在同一個資料夾喔。
從這個步驟開始，咱們來正式編寫 CSS 語法吧~關於本篇分享文最重要的背景圖片之設定，都是寫在 body 裡面！ 要請大家先準備一張用來當作固定背景圖片的小圖示，在範例中，小編選用了一個 256 px * 256 px 的 PNG 圖檔，並希望圖片可以單獨且固定在網頁的右下方， CSS 語法的部分，就請大家直接依照下方圖示說明: 完成之後，網頁如下 :
在 BOX 區包含了 h1 標題以及 p 文字段落，為網頁的主要畫面，我們在這裡要設定的有寬度與文字字體，又，因為已經設好寬度，所以只要將 margin-left 跟 margin-right 都設 auto，畫面即可置中。 完成之後，網頁如下 :
在 CONTENT 區，我們利用 padding 以及背景色的設定，可讓 h1 標題跟 p 段落之間，視覺上面有明顯區隔； 最後一行就是要分享給大家的 CSS3 特效之一 : 圓角效果，如果想要角度大一點的話，只要將像素數字再加大就可以了。 完成之後，網頁如下 :
在 h1 標題的語法部分，幾乎都是常用的文字設定，關於文字設定的專文，歡迎大家參考底下這一篇喔~ 《CSS 教學 – 基本文字設定 : font-size 與 line-height》 比較需要說明的只有「 text-transform : uppercase 」，這句語法可以讓英文字母設為全部大寫。相反的，假如希望英文字母變小寫的話，將 “uppercase” 改為 “lowercase” 就可以囉！ 完成之後，網頁如下 : 在這段語法的最後，請大家再加註一行，這也是今天要分享給大家的第二個 CSS3 特效 : 文字的陰影效果( text-shadow )。 陰影的範圍及程度，大家可以參照圖示中的數值，或是自己也可以 try 看看不同的設定，完成之後，就可以看見 h1 標題呈現出明顯的立體...
現在，請大家回顧一下步驟三，光是 background 的設定就用掉了5行，是不是可以簡化一點呢？ 嘿嘿嘿…….當然是沒問題，這邊就教各位如何簡化的進階寫法。 我們可以將所有與 background 相關的設定，全部縮寫在同一行語法中，縮寫之屬性先後順序並無嚴格規定，但大家可以記熟一種固定的順序以免遺漏喔。
在本篇一開始的 HTML 架構中，因為小編只有放入一小段文字內容在 p 段落中，所以最後整個網頁可以完整呈現在畫面中 : 假如，我們需要增加內容文字時，那會導致甚麼情形呢？… 哎呀！雖然咖啡跟筆記還是完美的固定在畫面右下角，可是，p 段落與網頁最下緣完全緊貼在一起了… 囧 為了避免出現這種窘況，小編提醒一下大家，請同樣回到步驟三: body 的語法排版中，只要再加註一行 : 打好之後，來看看結果發生甚麼變化吧~ 唷呼~這樣子，就算得上是一個專業又完美的 Ending 啦！ 這次的 CSS 語法教學就做到這邊結束，謝謝各位同學有耐心地跟著飛肯小編一起練習，希望大家都能夠有所收穫喔！ 當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
- Html body text。Html的body標籤便是實際上會在瀏覽器上顯示的網頁內容，在此設定 Body的標籤值「text」，將屬性值設定為某一個特定色彩：「#5DAC81」，如同截圖右側所看到的預覽效果，所有網頁上文字都變成是所設定的綠色。
- bgcolor背景顏色。接著再設定網頁的背景顏色，同樣是在body標籤內，所使用到的屬性是「bgcolor」，屬性值設定為灰色，也就是「#C0C0C0」，同樣可以在右側看到預覽的效果。
- Apache伺服器。想在網站首頁放上一張圖片，通常網站圖片由於瀏覽速度和美觀考量，會特別注意圖片尺寸及大小，這裡的相關資訊可以參考一下。另外文章範例是直接在windows電腦架設的Apache伺服器，因此是直接放在電腦的網站資料夾：「本機磁碟(C:)>Apache24>htdocs>html」，如果是實際在網際網路上所架設的網站便是上傳到網站的主目錄。
- background語法。有了圖片之後，想要在網頁上設定背景圖片，可以在body標籤使用「background」屬性，並且將屬性值設定為上個步驟的「海邊.jpg」圖片，如此在右側已經稍微能看到海邊的模糊景象，但不是很清楚。
background-position 屬性是用來指定背景圖案的位置。 它的值可以是： 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
接下來的 CSS 教學我們來了解一下 CSS 的背景設置，在 CSS 當中我們可以通過給予 CSS 背景屬性 background，就可以給頁面添加顏色背景等樣式，當然如果不想只改變 背景的顏色，我們也是可以引入 背景圖片 唷! 但是當你引入圖片後就會有問題產生，這邊產生的問題 ...
2021年9月26日 · 這篇文章要介紹有關背景的CSS屬性，包括背景顏色、圖片、透明度、滾動，背景圖片的重複，背景的位置以及背景的動態變換等，非常多的屬性和效果，以下會先介紹屬性的語法，再實際作範例來看看網頁呈現的效果!
