整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS 可以添加背景顏色和背景圖片，以及來進行圖片設(shè)置。
背景圖片(image)
語法：
background-image : none | url (url)
參數(shù)：
none : 無背景圖（默認的）
url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
背景位置(position)
語法：
background-position : length || length ? background-position : position || position
參數(shù)：
length : 百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明：
設(shè)置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。
如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。
注意：
實際工作用的最多的，就是背景圖片居中對齊了。
背景附著
語法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對象內(nèi)容滾動
fixed : 背景圖像固定
說明：
設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。
導(dǎo)航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)，我們設(shè)定行高等于盒子的高度，就可以使文字垂直居中。
CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統(tǒng)的布局中，只能使用少數(shù)的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設(shè)置背景樣式不再使用傳統(tǒng)HTML屬性來定義，轉(zhuǎn)而使用無限制、更靈活的CSS來定義。
目標
在CSS中，使用background-color屬性來定義元素的背景顏色。
語法：background-color:顏色值;
說明：顏色值是一個關(guān)鍵字或一個16進制的RGB值。
HTML標簽
背景顏色設(shè)置
效果
在CSS中，使用background-image屬性來定義元素的背景圖片。
語法：background-image:url("圖像地址");
說明：圖像地址可以是相對地址，也可以是絕對地址。
注意：給某個元素設(shè)置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設(shè)置的元素的寬高過小，背景圖片就無法完整地顯示出來了。
設(shè)置背景圖片
效果
在CSS中，使用background-repeat屬性可以設(shè)置背景圖像是否平鋪，并且可以設(shè)置如何平鋪。
語法：background-repeat:取值;
取值
當值是repeat，全屏覆蓋
全屏覆蓋
當值是repeat-x，x軸方向覆蓋
x軸方向覆蓋
當值是repeat-y，y軸方向覆蓋
y軸方向覆蓋
當值是no-repeat，不復(fù)制
不復(fù)制
在CSS中，使用background-position設(shè)置背景圖像的位置
語法：background-positon:像素值/關(guān)鍵字;
說明：語法中的取值包括兩種，一種是采用像素值，另一種是關(guān)鍵字描述。
1. 像素值
要設(shè)置水平方向數(shù)值（x軸）和垂直方向數(shù)值（y軸），參數(shù)如下
取值
假設(shè)設(shè)置一個距離左上角水平方向100px，垂直方向100px
背景圖片位置設(shè)置
效果如下
效果
2. 關(guān)鍵字
當background-position取值為關(guān)鍵字時，也需要設(shè)置水平方向和垂直方向的值，只不過值不是使用px為單位的數(shù)值，而是使用關(guān)鍵字代替。
取值
假設(shè)我們要設(shè)置一個水平方向、垂直方向都居中的位置，就可以這樣設(shè)置
背景圖片位置設(shè)置
這樣他就永遠都處于屏幕的正中間
效果
在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動
語法：background-attachment:scroll/fixed;
說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內(nèi)容隨滾動條滾動。
背景固定設(shè)置
效果
日常開發(fā)中，我們有時候需要獲取某個元素的背景圖片URL。在本文中，我將向大家介紹如何使用JavaScript來實現(xiàn)這一需求。
要獲取元素的背景圖片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);下面我們來逐步解析這段代碼的實現(xiàn)原理：
最終，我們得到的bi變量值就是背景圖片的URL：
'https://www.example.com/img.png'通過使用JavaScript中的getComputedStyle方法，我們可以輕松獲取到元素的背景圖片URL。這對于動態(tài)處理樣式或者進行其他基于背景圖片的操作非常有幫助。
如果你覺得本文對你有幫助，別忘了點贊并分享給更多需要的朋友！有任何問題或建議，歡迎在評論區(qū)留言，我們一起討論學習！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
