整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們學習 CSS 背景屬性。
假設這里有個 div 容器，寬 400，高 300，默認情況下，這個 div 是沒有背景的，或者說它的背景是透明的，我們拿一張圖片實驗一下就能看得出來，這個 div 在默認情況下，背景是透明的。
也可以給 div 加一個背景顏色。
既然可以設置背景顏色，那么當然也可以給這個 div 設計一個背景圖片，就像這樣。但是由于這個 div 已經被我設定了大小，圖片呢，是大于這個容器的，所以實際上，我們最終看到的效果，是這個樣子的。我們只能看到圖片的一部分。下面我們就來看看應用 CSS 背景屬性如何實現這個效果。
創建一個 css-background.html 文件和一個 background-style.css 文件。接下來，我們打算給整個頁面來添加背景圖片。
事實上，body 元素也是一個容器，可以直接給 body 添加背景圖片。body 容器默認水平方向上，是占滿整個窗口的，我們來給它添加一個高度樣式，定義選擇器 body，聲明樣式 height: 100%。
CSS
body {
height: 100%;
}預覽一下效果，按下 F12，來觀察一下頁面 body 元素的大小，我們發現 body 依然是只有寬度，沒有高度。為什么我們設置的高度 100% 不管用呢？大家注意，這里的100%是相對于它的父元素高度的，body 元素的父元素是 html，這個元素我們并沒有給它設置大小。
所以，在 body 選擇器前面加一個 html 逗號 ( html, )，這樣兩個元素都設置了高度。讓他們的高度和瀏覽器窗口大小保持一致。
這時再來看一下頁面，現在 body 和整個窗口就一樣大了。
CSS
html, body {
height: 100%;
}下面我們給 body 添加背景圖片，可以通過 background-image 屬性實現，屬性值為 url 后跟一個小括號，括號里面填寫背景圖片的路徑 （url(./duck.gif)）。
回到樣式代碼，再定義一個 body 選擇器，單獨給它再聲明樣式 background-image: url(./duck.gif)。這個圖片是一個動態圖片。
我們來觀看一下效果，為什么會出現這么多的圖片呢？我明明只是加了一張背景圖而已。原因是，當我們給元素添加背景圖片的時候，圖片是以平鋪的方式來展現的。
什么是平鋪呢？就是當我們放入一張背景圖的時候，這個圖片在默認情況下，會向四周擴散，無限的進行重復，就變成了這個樣子。當然了，容器是有大小限制的，最終我們能看到的部分呢，也就這么多而已。
如果我們不希望這個背景圖是重復的，需要使用一個新的背景屬性 background-repeat，取值為 no-repeat。
我們來看效果，最終就只有一張動圖了。
接下來我們來修改一下，將背景圖片換成另外一張圖片。
再來觀察這個效果，由于不允許平鋪，我們只看到了一張圖片。
把 background-repeat 屬性值 no-repeat 改為 repeat。
我們就看到了這樣的效果。
在平時開發的時候，給一個網頁或一個比較大的容器設置背景，經常會采用這樣的技巧，放一個小的圖片進去，只需要讓它保持平鋪的方式，我就會得到一張無限大的圖。
再回到剛才的例子。如果要求這個背景圖片在頁面中間顯示，我們如何調整背景圖的位置呢？
我們需要使用 background-position 屬性，這個屬性需要寫兩個值：第一個值表示在水平方向上的對齊方式——left，center，right。第二個值表示在垂直方向上的對齊方式——top，center ，bottom。
給 body 添加樣式 background-position: center center，也就是水平垂直居中。
大家發現，圖片移到了頁面的中間。如果將圖片放到右下角，屬性值該如何設置呢？把答案寫到公屏上吧。
回到 html 代碼，添加一個 h1 元素和五個 p 元素，填入一些文本。再復制五份。
再回到 css 代碼，背景圖恢復為 bg.png，圖片平鋪方式為 repeat。
我們看一下效果，可以通過滾動條來查看網頁內容，仔細觀察，文字和背景圖片一起滾動。那能否實現文字滾動，背景圖片不動呢？大家可以先腦補一下效果。
實現這個效果，需要使用 background-attachment 屬性，用來聲明容器里的背景圖片與內容的依附方式。值 fixed：圖片固定，值 scroll：同時滾動。
給 body 選擇器添加樣式 background-attachment
[??t?t?m?nt] : fixed。
再看一下效果，滾動一下頁面，背景固定的效果實現了！
前面我們多次使用到了 background-color 屬性，它可以給容器設置背景顏色，值可以設置為顏色名稱，十六進制顏色值，RGB顏色值等等。
把背景圖片的樣式注釋掉，添加 background-color 屬性，值為 green。
此時，整個頁面背景為綠色！顏色有點深，可以讓綠色變的淺一些嗎？
你能想到的方法應該是換一個其他的顏色值，其實，我們可以通過讓背景透明一些，同樣可以實現這個效果。
這需要學習一個新的顏色值表示方法——rgba。這里的 rgb 就是 rgb 顏色值，a 是 alpha 的簡寫，表示通過設置一個 alpha 通道，來指定顏色的不透明度，是一個介于 0 到 1 的數字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的顏色就是黑色半透明。
把 green 顏色名稱改為 rgba(0, 255, 0, 0.1)。
我們看，頁面綠色的背景因為透明，顏色變淺了！
為了縮短代碼，也可以使用單一的 background 來指定所有的背景屬性。
可以把 body 的全部背景屬性，合并在一個 background 屬性里。注釋所有代碼，聲明屬性 background，值可以寫為：顏色值 rgba(0, 255, 0, 0.1)， 背景圖片 url(./duck.gif)，平鋪方式 no-repeat，背景圖位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）
我們看，一句聲明，實現了全部的背景效果！
文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75
使用CSS設置各種HTML元素的背景，元素的背景有以下屬性：
設置背景顏色：
設置背景圖像：
設置背景圖像沿x軸重復：
設置圖像不重復，位于右上角：
設置圖像不重復，不隨內容滾動：
如果需要指定的圖像屬性太多時，可采用簡寫形式，如：
使用背景簡寫時，屬性的指定順序如下所示：
想給你的網站進行美化嗎？一種方法是在你的WordPress頁面上添加一個背景圖片。畢竟背景圖片是放在頁面內容后面的圖片或設計，以美化頁面。如何給WordPress文章和頁面添加背景圖片？在WordPress網站上添加背景圖片有不同的方法。
原文引用：給WordPress文章和頁面添加背景圖片圖文教程 - 搬主題
在本圖文教程中，搬主題將介紹三種很容易做到的方法。
簡單地說，它們美化了你的網站。相對于在整個網站上使用普通的背景，在你的網站背景上顯示一個圖像會增加一些美感和專業性。
在過去，人們試圖保持他們的網站設計盡可能的簡單。雖然這在當時很有效，但后來情況發生了變化。隨著全球網站數量的增加，確保你在競爭中脫穎而出是很重要的。實現這一目標的方法之一是改善你的網站設計。使用背景圖片就可以為你的WordPress網站做到這一點。
正如一切有優點的事物一樣，如果使用不當，也必然會有弊端。下面我們將討論其中的一些問題。
首先，一些背景圖片可能會出現在完全不合適的地方，并擾亂你的頁面內容。這將導致用戶錯過你打算在你的頁面上傳遞的信息。其次，不對移動端負責的背景圖片可能會影響你網站的移動可用性。大多數用戶從他們的移動設備訪問互聯網。出于這個原因，作為一個網站所有者，移動友好性應該是你最關心的問題。
最后，如果你使用的是大文件尺寸的圖像，這可能會增加你網站的加載時間。因此，加載時間的增加會導致高跳出率，這反過來又會影響你的頁面SEO。當然，你可以通過使用圖像壓縮插件或在上傳到你的網站之前簡單地在線壓縮圖像來避免這種情況。
有三種方法可以在WordPress網站上添加背景圖片。那就是使用默認的主題選項、使用插件或使用自定義CSS代碼。下面，我們將告訴你如何使用它們中的每一個。
一些WordPress主題支持使用圖片作為頁面的背景。如果你的主題支持它，你可以在你的管理面板上的自定義頁面啟用它。首先登錄到你的WordPress儀表板，然后進入外觀>>自定義。這將會出現WordPress主題定制器頁面。
在右邊，你會看到你的網站的實時預覽和最近的變化。左邊的面板包含了你的主題所提供的各種自定義功能。要設置背景圖片，請點擊背景。
在 "背景"菜單上，你可以使用一個圖像或顏色作為你的背景。要使用圖像，請點擊 "選擇圖像"按鈕。
接下來，從你的WordPress媒體庫中選擇一張圖片。要上傳一個新的圖像，選擇 "上傳文件 "標簽。然后點擊 "選擇文件"，從你的電腦中選擇圖像。
將圖像上傳到你的網站后，點擊選擇圖像按鈕。
要改變圖像的大小和顯示，請點擊 "預設 "下拉菜單并從可用的選項中選擇。你可以測試每個選項，以確定哪個選項對你的圖像效果最好。
在 "圖像位置 "下，你可以選擇你想要對齊圖像的角度。當你完成了對圖像的定制后，點擊 "發布"來實現這些變化。你可以訪問你網站上的任何一個頁面，看看背景看起來如何。
使用大多數主題提供的默認背景選項的弊端是它沒有提供很大的靈活性和控制背景圖片在你的頁面上的外觀。此外，背景圖片是全局性的，適用于你整個網站的帖子和頁面。因此，如果你想為其他頁面和帖子使用不同的背景，你可能會發現這很困難。幸運的是，有了WordPress的添加背景圖片的插件，你在為網站的任何部分或頁面添加背景照片時，可以得到很大的控制和靈活性。
如果你的主題設置中沒有添加背景圖片的選項，你可以使用一個插件來添加它。在本節中，我們將展示如何使用兩個插件來做到這一點。
Elementor是WordPress最受歡迎的拖放式頁面生成器插件之一。該插件有很多功能，讓你使用交互式儀表盤建立一個完整的網站，而不需要寫一行代碼。
在這里，我們將使用背景功能為WordPress網站上的部分添加背景圖片。要開始，你需要從你的WordPress儀表板上安裝并激活Elementor插件。
這里可以從搬主題站點下載漢化中文版《Elementor Pro完美漢化中文版|頁面拖動自定義設計WordPress插件介紹》
激活該插件后，你可以使用直觀的儀表盤來編輯你的WordPress文章和頁面。首先，進入頁面>>所有頁面，然后在你想修改的頁面下面選擇編輯。
在頁面編輯器上，點擊 "用Elementor編輯 "按鈕，打開儀表板。Elementor儀表板有很多功能，可以幫助你編輯網站的任何部分。你可以在 "內容 "選項卡中添加文本、標題、圖片、視頻等。
假設我們想在你的頁面上的某個部分添加一個背景圖片，點擊六點圖標，突出整個部分，如下圖所示。
在 "風格"選項卡上，點擊背景下拉菜單。接下來，選擇鋼筆圖標，然后點擊選擇圖像。
現在從你的WordPress媒體庫中選擇一張圖片或上傳一張新圖片。
添加背景疊加
在選擇圖像后，你可以添加一個背景覆蓋，這樣圖像就不會擾亂你的內容。為此，點擊背景疊加下拉菜單。
然后在 "顏色 "部分選擇你要使用的顏色。
當你完成添加圖像和效果后，點擊更新按鈕，保存你的變化。通過這種方法，你可以在網站的任何部分或頁面添加無限的背景圖片。只需選擇頁面，然后用Elementor插件編輯，添加你的背景圖片。
另一個你可以用來在WordPress中添加背景圖片的插件是Advanced WordPress Backgrounds插件。除了添加背景圖片外，你還可以使用視頻作為你的背景元素。這些視頻可以來自你的媒體庫、YouTube或Vimeo視頻。
還有一些特殊的效果，你可以應用到你的圖片上，如視差滾動效果。在這里，我們將專注于添加一個背景圖片，但如果你想了解更多關于背景效果的信息，請查看我們關于在WordPress添加視差效果的詳細指南。要開始，你需要在你的WordPress儀表板上安裝和激活該插件。為此，進入插件>>新增。在搜索框中，輸入 "advanced WordPress backgrounds"。接下來，點擊立即安裝按鈕，在安裝完成后激活該插件。
要使用這個插件，請進入頁面>>所有頁面。然后在你想添加背景的頁面下面選擇編輯。
在編輯器上，點擊添加塊圖標，然后在搜索框中輸入 "AWB"。當它出現時，選擇背景（AWB）塊。
接下來，在右側選擇你想添加的背景類型。你可以使用背景顏色、圖像或視頻。選擇 "圖像 "選項卡并點擊選擇圖像。
之后，從你的媒體庫中選擇一張圖片。
你可以分別使用 "尺寸 "和 "背景尺寸 "選項來改變圖像和背景的大小。添加圖片后，點擊 "更新 "按鈕，保存你的更改。如果你使用的是經典編輯器，導航到你想添加背景圖片的頁面或帖子。一旦到達那里，點擊高級WordPress背景圖標。
在 "常規 "選項卡上，點擊背景類型下拉菜單，然后選擇圖像選項。
接下來，點擊選擇圖像按鈕，然后從你的WordPress媒體庫中選擇一個圖像。
你也可以更新圖像的大小和位置。如果你想添加一個覆蓋層，點擊 "覆蓋顏色 "下面的 "選擇顏色"。接下來，選擇你想使用的顏色。
而現在，在自定義背景圖片后，點擊插入。
這將生成一個短碼，并自動將其插入你的編輯器中。在這個簡碼中，你可以輸入你希望在背景圖片上顯示的文字。一旦完成，點擊 "發布/更新 "按鈕就可以實現改變。現在你可以在你的網站上查看該頁面，看看背景圖片的樣子。
如果你是技術控，你可以使用自定義CSS代碼來為你的網頁和文章添加自定義背景。使用自定義CSS可以讓你對圖像的外觀和位置有很大的靈活性和控制。
使用CSS方法，有許多背景圖片的位置可供選擇。首先，我們可以創建一個全局性的CSS背景圖片，它將顯示在所有頁面上。很像一些WordPress主題所提供的選項。另外，我們可以添加特定類別的背景圖片，或者創建一個帶有背景圖片的CSS類。然后，你可以將該類應用于單個帖子和頁面。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
