首页
/
每日頭條
/
圖文
/
css樣式基礎與整體總結
css樣式基礎與整體總結
更新时间:2026-06-15 17:00:48
一、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
推荐阅读
肌膚出油的原因
肌膚出油的原因
皮膚出油是很多人都很困擾的問題,早上洗完臉之後,沒過多久臉上就已經是油光面面,在有光的地方臉上甚至會反光,看起來非常的油膩。尤其是夏天,在戶外,整個人看起來狀态都不是特别的好。其實油性肌膚不隻是指肌膚出油那麼簡單,并且導緻肌膚出油的原因也有...
2026-06-15
電氣自動化與機電一體化專業區别
電氣自動化與機電一體化專業區别
電氣自動化與機電一體化專業區别?機電一體化是專業培養掌握機械加工技術、電工電子技術、檢測技術、液壓與氣動、電氣控制技術、自動生産線技術及機電設備維修等基本知識,具備機電一體化設備操作、安裝、調試、維護和維修能力,從事自動生産線等機電一體化設...
2026-06-15
浙江衛視什麼時候播出特戰榮耀
浙江衛視什麼時候播出特戰榮耀
《人世間》無疑是截止到目前為止,2022年最火爆的一部劇作,收視打破了央視五年以來的最高點,即便是經過二輪播出,也拿到了亮眼的收視成績。這一收視黑馬二輪播出之後已經在各大衛視完結,也給予了新劇更多表現的機會。目前中國視聽大數據總局公布了4月...
2026-06-15
t恤印花有幾種
t恤印花有幾種
定制T恤是年輕人展示個性的一個重要渠道。随着定制T恤的發展,T恤的印花技術也在不斷發展。各種不同技術類型的印花技術效果也各不相同,很好的滿足了年輕人的個性化需求。那麼T恤究竟有哪些常見的印花技術呢?今天我們就一起來看一看。水漿印花工藝目前最...
2026-06-15
?在意大利文藝複興的搖籃裡受教育的ShaneWolf(最初來自辛辛那提)在佛羅倫薩學習,并參加了享有聲望的天使藝術學院的深造課程研究傳統的,學術的繪畫,我來為大家講解一下關于?跟着小編一起來看一看吧!在意大利文藝複興的搖籃裡受教育的Shan...
2026-06-15
Copyright 2023-2026 - www.tftnews.com All Rights Reserved