background-image : none | url (url) 

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

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

background-attachment : scroll | fixed 

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

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

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

目標(biāo)

• 設(shè)置背景顏色
• 設(shè)置背景圖片
• 操作背景圖片樣式

背景顏色-background-color

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

語法：background-color:顏色值;

說明：顏色值是一個(gè)關(guān)鍵字或一個(gè)16進(jìn)制的RGB值。

背景圖像--background-image

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

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

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

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

背景重復(fù)樣式--background-repeat

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

語法：background-repeat:取值;

當(dāng)值是repeat，全屏覆蓋

當(dāng)值是repeat-x，x軸方向覆蓋

當(dāng)值是repeat-y，y軸方向覆蓋

當(dāng)值是no-repeat，不復(fù)制

背景圖片位置--background-position

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

語法：background-positon:像素值/關(guān)鍵字;

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

1. 像素值

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

假設(shè)設(shè)置一個(gè)距離左上角水平方向100px，垂直方向100px

效果如下

2. 關(guān)鍵字

當(dāng)background-position取值為關(guān)鍵字時(shí)，也需要設(shè)置水平方向和垂直方向的值，只不過值不是使用px為單位的數(shù)值，而是使用關(guān)鍵字代替。

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

這樣他就永遠(yuǎn)都處于屏幕的正中間

背景固定樣式--background-attachment

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

語法：background-attachment:scroll/fixed;

說明：background-attachment 屬性只有2個(gè)屬性值。scroll表示背景圖像隨對象滾動(dòng)而滾動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁面不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。

總結(jié)

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

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

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

舉個(gè)例子，如果我們有如下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);

下面我們來逐步解析這段代碼的實(shí)現(xiàn)原理：

1. 選擇元素：我們使用document.querySelector方法來選擇目標(biāo)div元素。
2. 獲取計(jì)算后的樣式：通過調(diào)用window.getComputedStyle方法并傳入選中的元素，我們可以獲取該元素的所有計(jì)算后的CSS樣式值，這些值存儲(chǔ)在一個(gè)對象中。
3. 提取背景圖片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'

結(jié)束

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

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