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