CSS 背景(background)

SS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

background-color 背景顏色
background-image 背景圖片地址
background-repeat 是否平鋪
background-position 背景位置
background-attachment 背景固定還是滾動
背景的合寫（復合屬性） background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的）

url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧：我們提倡背景圖片后面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length
?
background-position : position || position

參數：

length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。

如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。

注意：

position 后面是x坐標和y坐標。可以使用方位名詞或者精確單位。
如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附著

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動

fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最后一個參數是alpha 透明度取值范圍 0~1之間

注意：背景半透明是指盒子背景半透明，盒子里面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中。

CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統的布局中，只能使用少數的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設置背景樣式不再使用傳統HTML屬性來定義，轉而使用無限制、更靈活的CSS來定義。

目標

設置背景顏色
設置背景圖片
操作背景圖片樣式

背景顏色-background-color

在CSS中，使用background-color屬性來定義元素的背景顏色。

語法：background-color:顏色值;

說明：顏色值是一個關鍵字或一個16進制的RGB值。

HTML標簽

背景顏色設置

效果

背景圖像--background-image

在CSS中，使用background-image屬性來定義元素的背景圖片。

語法：background-image:url("圖像地址");

說明：圖像地址可以是相對地址，也可以是絕對地址。

注意：給某個元素設置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設置的元素的寬高過小，背景圖片就無法完整地顯示出來了。

設置背景圖片

效果

背景重復樣式--background-repeat

在CSS中，使用background-repeat屬性可以設置背景圖像是否平鋪，并且可以設置如何平鋪。

語法：background-repeat:取值;

取值

當值是repeat，全屏覆蓋

全屏覆蓋

當值是repeat-x，x軸方向覆蓋

x軸方向覆蓋

當值是repeat-y，y軸方向覆蓋

y軸方向覆蓋

當值是no-repeat，不復制

不復制

背景圖片位置--background-position

在CSS中，使用background-position設置背景圖像的位置

語法：background-positon:像素值/關鍵字;

說明：語法中的取值包括兩種，一種是采用像素值，另一種是關鍵字描述。

1. 像素值

要設置水平方向數值（x軸）和垂直方向數值（y軸），參數如下

取值

假設設置一個距離左上角水平方向100px，垂直方向100px

背景圖片位置設置

效果如下

效果

2. 關鍵字

當background-position取值為關鍵字時，也需要設置水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。

取值

假設我們要設置一個水平方向、垂直方向都居中的位置，就可以這樣設置

背景圖片位置設置

這樣他就永遠都處于屏幕的正中間

效果

背景固定樣式--background-attachment

在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動

語法：background-attachment:scroll/fixed;

說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。

背景固定設置

效果

總結

日常開發中，我們有時候需要獲取某個元素的背景圖片URL。在本文中，我將向大家介紹如何使用JavaScript來實現這一需求。

獲取元素背景圖片URL的JavaScript方法

要獲取元素的背景圖片URL，我們可以使用getComputedStyle方法來獲取background-image的CSS屬性值。

舉個例子，如果我們有如下HTML代碼：

<div style="background-image:url('http://www.example.com/img.png');">...</div>

我們可以通過以下JavaScript代碼來獲取背景圖片的URL：

const div = document.querySelector('div');
const style = window.getComputedStyle(div, false);
const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
console.log(bi);

下面我們來逐步解析這段代碼的實現原理：

選擇元素：我們使用document.querySelector方法來選擇目標div元素。
獲取計算后的樣式：通過調用window.getComputedStyle方法并傳入選中的元素，我們可以獲取該元素的所有計算后的CSS樣式值，這些值存儲在一個對象中。
提取背景圖片URL：使用style.backgroundImage屬性可以獲取到background-image的完整值，例如url("http://www.example.com/img.png")。我們使用slice(4, -1)方法來截取字符串中的URL部分，然后通過replace(/"/g, "")方法去除字符串中的引號。

最終，我們得到的bi變量值就是背景圖片的URL：

'https://www.example.com/img.png'

結束

通過使用JavaScript中的getComputedStyle方法，我們可以輕松獲取到元素的背景圖片URL。這對于動態處理樣式或者進行其他基于背景圖片的操作非常有幫助。

如果你覺得本文對你有幫助，別忘了點贊并分享給更多需要的朋友！有任何問題或建議，歡迎在評論區留言，我們一起討論學習！

在線咨詢

上一篇：5個范例告訴你：什么是自適應網頁設計
下一篇：HTML實戰篇：純css制作二級橫向以及豎向菜單導航

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商