首页
/
每日頭條
/
圖文
/
css樣式基礎與整體總結
css樣式基礎與整體總結
更新时间:2026-06-24 19:46:05
一、CSS背景屬性1.背景顔色(background-color)

屬性值:transparent(透明的)或color(顔色)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)1

css樣式基礎與整體總結(CSS基礎知識七CSS背景)2

2.背景圖片(background-image)

屬性值:none(沒有)或url(使用絕對或相對地址指定背景圖像)

優點:非常便于控制位置(精靈圖也是一種運用場景)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)3

css樣式基礎與整體總結(CSS基礎知識七CSS背景)4

3.背景平鋪(background-repeat)

屬性值:repeat|no-repeat|repeat-x|repeat-y

背景圖片會壓住背景顔色

css樣式基礎與整體總結(CSS基礎知識七CSS背景)5

css樣式基礎與整體總結(CSS基礎知識七CSS背景)6

4.背景圖片位置(background-position)

background-position:x y;

  1. x坐标和y坐标可使用方位名詞或精确單位
  2. 方位名詞a. x可為left | center | right ,y可為top | center | bottomb. top left 和 left top 效果一緻(與順序無關)c. 若隻指定一個方位名詞,另一個值忽略,則第二個值默認為居中對齊
  3. 精确單位a.先x坐标後y坐标b.若隻指定一個值,則為x,另一個值為垂直居中
  4. 混合單位:若混合使用,第一個值為水平x,第二個值為垂直y
5.背景圖片固定(background-attachment)

屬性值:scroll(随内容滾動)| fixed(背景固定)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)7

css樣式基礎與整體總結(CSS基礎知識七CSS背景)8

6.背景複合寫法(background)

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

7.背景色半透明(CSS3提供了背景顔色半透明的效果)
  • background:rgba(0,0,0,.3);
  • red green blue alpha(透明度 範圍0~1)
  • 習慣把0.3的0省掉
  • 背景半透明是指盒子背景半透明,盒子裡面的内容不受影響
,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
現代服務應該有什麼會計科目(一文了解居民服務)
現代服務應該有什麼會計科目(一文了解居民服務)
     哈喽,大家好呀!   上一個專題,我們學習了房地産業常用的會計分錄。   本篇開始,我們将開啟下一個專題的學習:居民服務、修理和其他服務業常用會計分錄彙總。   今天我們先來簡單了解一下居民服務、修理和其他服務業的行業概述,以及該行業主要會計科目的設置。   一、居民服務、修理和其他服務業的基本概述依據國民經濟行業分類标準(GB/T 4754-20...
2026-06-24
王菲那英唱歌歲月(王菲那英合體獻唱奪冠主題曲)
王菲那英唱歌歲月(王菲那英合體獻唱奪冠主題曲)
  1月19日,王菲那英一起合唱奪冠片尾曲的消息登上了微博熱搜,令無數粉絲一衆崩潰,這消息簡直讓人淚奔。畢竟是兩位樂壇傳奇的驚喜合唱,令無數想去看電影的觀衆更加的期待了。      奪冠這部電影是中國女排改名後的稱呼,也是由陳可辛導演所拍攝的,裡面的主演更是有一代女星鞏俐,還有黃渤和中國女排的姑娘們。她們用熱血之心和當年奪冠時曆程,一點一點将其演出來,用實力...
2026-06-24
和動物做室友(我和竹雞交朋友)
和動物做室友(我和竹雞交朋友)
  我家樓外有一片銀杏林,林下有一簇簇灌木叢,林中常有一對竹雞出沒。每次看到它們在林下覓食,心中充滿欣喜。看到它們小心翼翼地,忙個不停地覓食,心中難免有幾分欠意。畢竟,林下蟲子不多,草籽很少,更無糧食,我毅然倒出一大把玉米沙沙,使勁地扔向林子,結果飛來兩隻斑鸠,它們喜出望外地美餐了一頓,飽了,飛走了。我心中有幾分不悅,好浪費表情喲。今早上七點鐘,我習慣性地到...
2026-06-24
粵語身體各部位發音(人體部位粵語讀法)
粵語身體各部位發音(人體部位粵語讀法)
  哈喽,大家好   粵語是中國的語言之一,早期的粵語歌還有粵語電影影響了很多人,近日有一位網紅用粵語來讀人身體的部位,看看她讀的對不對呢?!      粵語讀法   美女首先開始用粵語來讀小腿,小腿的粵語讀法是“腳瓜”,小編認為可能是小腿的肌肉比較像瓜吧,接下來是“咯吱窩”的讀法      咯吱窩   咯吱窩的粵語讀法是“骼肋底”,咯吱窩靠近肋骨旁邊,粵語...
2026-06-24
有關聖誕節的賀卡和小禮物(給你的朋友的聖誕禮物加上自制聖誕賀卡吧)
有關聖誕節的賀卡和小禮物(給你的朋友的聖誕禮物加上自制聖誕賀卡吧)
  自做聖誕節小卡片   簡單又好看   喜歡的可以收藏和關注小編喲~   讓我們一起早做準備吧~   圖一      成品作品   自做聖誕節小卡片   配飾有自做花環 麻繩   還有在上海博物館門口撿的不明植物   此作品和我本人一樣 依舊很粗糙   哈哈哈哈哈   圖二      借助尺子等分紙張   再在上面取1cm×1cm的量   連接兩點畫出三角...
2026-06-24
Copyright 2023-2026 - www.tftnews.com All Rights Reserved