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