web前端開發(fā)基礎(chǔ)之背景元素的設(shè)置
時間：2023-05-23 20:30:01 | 來源：網(wǎng)站運營
時間：2023-05-23 20:30:01 來源：網(wǎng)站運營
web前端開發(fā)基礎(chǔ)之背景元素的設(shè)置：
background-color? background-color屬性用來為元素設(shè)置背 景顏色。
? 需要指定一個顏色值，當(dāng)指定了一個顏色 以后，整個元素的可見區(qū)域都會使用這個 顏色作為背景色。
? 如果不設(shè)置背景顏色，元素默認(rèn)背景顏色 為透明，實際上會顯示父元素的背景顏色。
background-image? background-image可以為元素指定背景 圖片。
? 和background-color類似，這不過這里是 用的是一個圖片作為背景。
? 需要一個url地址作為參數(shù)，url地址需要指 向一個外部圖片的路徑 ? 例如：
background-image: url(1.jpg)
background-repeat? background-repeat用于控制背景圖片的 重復(fù)方式。
? 如果只設(shè)置背景圖片默認(rèn)背景圖片將會使 用平鋪的方式，可以通過該屬性進行修改。
? 可選值：
– repeat：默認(rèn)值，圖片左右上下平鋪
– no-repeat：只顯示圖片一次，不會平鋪
– repeat-x：沿x軸水平平鋪一張圖片
– repeat-y：沿y軸水平平鋪一張圖片
background-position? background-position用來精確控制背景 圖片在元素中的位置。
? 可以通過三種方式來確定圖片在水平方向 和垂直方向的起點。
– 關(guān)鍵字：top right bottom left center
– 百分比
– 數(shù)值
background-attachment? background-attachment用來設(shè)置背景圖 片是否隨頁面滾動。
? 可選值：
– scroll：隨頁面滾動
– fixed：不隨頁面滾動
background? background是背景的簡寫屬性，通過這個 屬性可以一次性設(shè)置多個樣式，而且樣式 的順序沒有要求。
? 例如： background: green url(1.jpg) no-repeat center center fixed;
CSS Sprite? CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式。
? 通過這種方式我們可以將網(wǎng)頁中的零星圖 片集中放到一張大圖上。
? 這樣一來，一次請求便可以同時加載多張 圖片，大大提高了圖片的加載效率。
我建了一個前端小白交流群，點擊下面的本站官方小卡片復(fù)制我的微信號，添加進入交流群。我會給大家分享我收集整理的各種學(xué)習(xí)資料，組織大家一起做項目練習(xí)，幫助大家匹配一位學(xué)習(xí)伙伴互相監(jiān)督學(xué)習(xí)，歡迎加入。
關(guān)鍵詞：背景,設(shè)置,基礎(chǔ)
在線咨詢